Line Chart By Using HighCharts Charting Library

The following Line chart, drawn by HighCharts.js library, is just a very basic example of what this library can do.

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

(left-bracket)BlazingChart charttype="highcharts" source="highcharts-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:

<div id="container-HC" style="width:100%; height:400px;"></div>
<script>
jQuery(function () { 
    jQuery('#container-HC').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Fruit Consumption'
        },
		xAxis: {
		    categories: ['Spain', 'Italy', 'Romania']
		},
		yAxis: {
		    title: {
		        text: 'Percent'
		    }
		},
		series: [{
		    name: 'industry',
		    data: [24, 25, 31],
		    color: '#ff0000'
		}, {
		    name: 'transport',
		    data: [42, 34, 23]
		}, {
		    name: 'residential',
		    data: [19, 26, 35]
		}, {
		    name: 'services',
		    data: [11, 13, 8]
		}, {
		    name: 'other',
		    data: [4, 2, 3]
		} ]
	});
});
</script>

As you see, javascript libraries are not included here. HighCharts.js is enqueued in footer automatically.