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:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.