ZingChart Sample: A Simple Bar Chart

The following chart, drawn by ZingChart library, is a Simple Bar Chart.

Using our plugin, named Blazing Charts, I added the following shortcode to this post:

(left-bracket)BlazingChart charttype="zingchart" source="zingchart-sample-1"(right bracket)

The first parameter specifies which charting library is used. The second parameter is the slug of a Custom Post Type, named Chart Snippets, introduced by that plugin.

The source of the script for the drawing is added as plain text to a Chart Snippet. The content of the chart snippet for the above chart is as following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="chartDiv" style="direction: ltr;"></div>
<script>
    var chartData = {
        "type":"bar",
        // Specify your chart type here.
        "series" : [
            // Insert your series data here.
            {"values":[5,20,15,25,10]}
            ]
        };
        window.onload = function(){
            // Render Method[2]
            zingchart.render({
                id:'chartDiv',
                data:chartData,
                height:400,
                width:600
            });
    };
</script>

<div id="chartDiv" style="direction: ltr;"></div>
<script>
	var chartData = {
		"type":"bar",
		// Specify your chart type here.
		"series" : [
			// Insert your series data here.
			{"values":[5,20,15,25,10]}
			]
		};
		window.onload = function(){
			// Render Method[2]
			zingchart.render({
				id:'chartDiv',
				data:chartData,
				height:400,
				width:600
			});
	};
</script>