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.
Is there a way to include accessiblity and pattern fill? To help with screen readers and color blindness?
https://www.highcharts.com/a11y.html