So far in this book, we have looked at drawing charts by manually providing data in the form of a series. However, we can actually go beyond this default functionality and load the data to be plotted in various ways. HTML tables are commonly used to mark up data for web pages, and Highcharts provides us with a functionality to load data right from HTML tables instead of passing it in the series component.
Consider the following HTML table code with an ID of vehicle_data that shows the number of cars and commercial vehicles manufactured in the UK from 2008 to 2012:
<table id="vehicle_data">
<thead>
<tr>
<th></th>
<th>Cars</th>
<th>Commercial Vehicles</th>
</tr>
</thead>
<tbody>
<tr>
<th>2008</th>
<td>1446619</td>
<td>202896</td>
</tr>
<tr>
<th>2009</th>
<td>999460</td>
<td>90679</td>
</tr>
<tr>
<th>2010</th>
<td>1270444</td>
<td>123019</td>
</tr>
<tr>
<th>2011</th>
<td>1343810</td>
<td>120189</td>
</tr>
<tr>
<th>2012</th>
<td>1464906</td>
<td>112039</td>
</tr>
</tbody>
</table>We also need to include the data module after the highcharts.js script, as shown in the following code:
<script src="Highcharts4.x.x/js/highcharts.js"></script> <script src=" Highcharts4.x.x/js/modules/data.js"></script>
The JavaScript code to plot the chart is as follows:
(function() {
$( '#chart_container' ).highcharts({
chart: {
type: 'line'
},
title: {
text: 'Vehicles Manufactured in the UK'
},
subtitle: {
text: 'Source: <a href="http://www.oica.net/">OICA</a>',
useHTML: true
},
data: {
table: document.getElementById( 'vehicle_data' )
}
});
})();This will produce the following line chart showing the data:
You can add as many data series to the HTML table as you want to plot the data.