Loading data from an HTML table

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.

Note

The data module is required in order to be able to load the data directly from the HTML table. You can find it at Highcharts-4.x.x/js/modules/data.js.

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