[Resolved] Charts and Graphs with Toolset

[Author]

Posts

[peterS-14]

Hi Toolset Team

Are there any plans to integrate chart and graph displays in Toolset or can you recommend some way how to generate charts from custom post types?

Thanks and best regards

[Beda]

There are no such plans, although I would love it too, to have the chance to use Views as a Data provider or display the content as charts or diagrams.

There are plans (but no ETA) to allow a raw output of Views in future, with that you could then populate 3rd Party Plugin's charts.

By now that's not intended to work.

But I can provide you a very nice and working solution.

Please read the following lines carefully.

1. Install this Plugin:
WordPress Charts
https://wordpress.org/plugins/wp-charts/

2. Create a View where you query the content you want to display with this Chart.
A example is to query a post type and return a given NUMERICAL field.
The Views Loop has to look somehow like this:

<!-- wpv-loop-start -->
  <wpv-loop>[wpv-item index=1][types field="your-field" output="raw"][/types],[wpv-item index=other][types field="your-field" output="raw"][/types],[wpv-item index=pad-last][types field="your-field" output="raw"][/types]</wpv-loop>
	<!-- wpv-loop-end -->

3. Create a Page where you insert the WordPress Charts Plugins ShortCode populated with the previously create View, or use a Content Template and this JS, inserted to the HTML editor directly:

<script>
		var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
		var lineChartData = {
			labels : [[wpv-view name="your-view" shortcodeargument="argument"]],
			datasets : [
				{
					label: "Label One",
					fillColor : "rgba(215, 40, 40, 0.2)",
					strokeColor : "rgba(215, 40, 40, 1)",
					pointColor : "rgba(215, 40, 40, 1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(215, 40, 40, 1)",
					data : [[wpv-view name="your-view" shortcodeargument="argument"]]
				},
				{
					label: "Label Two",
					fillColor : "rgba(50, 155, 44, 0.2)",
					strokeColor : "rgba(50, 155, 44, 1)",
					pointColor : "rgba(50, 155, 44, 1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(50, 155, 44, 1)",
					data : [[wpv-view name="your-view" shortcodeargument="argument"]]
				},
  				{
					label: "Label Three",
					fillColor : "rgba(0, 0, 6, 0.2)",
					strokeColor : "rgba(0, 0, 6, 1)",
					pointColor : "rgba(0, 0, 6, 1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(0, 0, 6, 1)",
					data : [[wpv-view name="your-view" shortcodeargument="argument"]]
				}
			]
		}
	window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
	}
	</script>

Not that for each Data Set, you need a Specific View returning the correct data.
You can partially achieve that with a Views ShortCode argument, and multiple Views.

It depends of course what you want to display, and above is just a example.

We don't assist this Custom Code, but above should give enough insight into how you can achieve this with Custom JS and the mentioned Plugin, which also comes with a set of ShortCodes to display their Charts.

Very important with this approach is to return a RAW Views Loop output, which is not possible by default with Toolset.

But you can use this solution mentioned here:
https://toolset.com/forums/topic/views-result-array-as-shortcode-parameter/
Quick Link to final solution:
https://toolset.com/forums/topic/views-result-array-as-shortcode-parameter/page/3/#post-345627

Thank you

[peterS-14]

Hi Beda

thanks for for your fast reply and valuable hint.

I will give it a try but as it might have escaped your attention, the wp-charts plugin isn't updated for around 2 years now 🙁 but maybe the use of some other chart plugin might work too.

I dare to guess that other toolset users might like this feature too and the raw output of Views will be a good starting point. Though it really would be nice to have then a choice to display the output as a bar-, line- or pie chart.

Do you have a feature request section, where users could vote?
I have seen that in other places and it's a great way to see what customers want and set up a development roadmap.

Best Regards and thanks

[vijayB-4]

Hi,
Is there anyway you could elucidate this further.

I need to create a line graph which shows an athlete's time across events ( The View essentially has a filter with the Athelete's name and event) , The resulting output is a Date and Timing.

I just want to plot this.

Will the loop only work with this

<!-- wpv-loop-start -->
<wpv-loop>[wpv-item index=1][types field="your-field" output="raw"][/types],[wpv-item index=other][types field="your-field" output="raw"][/types],[wpv-item index=pad-last][types field="your-field" output="raw"][/types]</wpv-loop>
<!-- wpv-loop-end -->

and what does shortcodeargument="argument" mean

please help I am a newbie just requesting for some direction

Vijay