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>

<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.

Line Chart By Using HighCharts Charting Library

One thought on “Line Chart By Using HighCharts Charting Library”

Leave a Reply Cancel reply