by Torstein Hønsi
The Data module provides options for loading data from external sources, like CSV files, HTML tables or Google Spreadsheets, in a convenient way, using a declarative options set. Its options are available under the data object. For the full reference and samples, see api.highcharts.com/highcharts/data.
The sources for the data module (CSV file, HTML tables or Google spreadsheets), all share the tabular structure. When parsed by the data module, they are internally read into a virtual table of rows and columns. This basic model allows for a set of options that is shared between the sources. The region of the table is defined by the startRow, endRow, startColumn and endColumn options. The source data can be rotated or inverted by setting the switchColumnsAndRows option. And for all sources, the seriesMapping object allows custom assignment of the columns to specific point options.
CSV can be loaded in two ways. Either data.csv, that holds a CSV string to be read into the chart, or, since v6.1, data.csvURL that points to a file location. By default, the first row of the CSV data is interpreted as series names, the first column signifies category names or X values/dates, and subsequent columns hold data values.
Here's how to load the data using data.csvURL and apply the csv inside a common options structure. The sample can be seen live at data-module.csv.htm.
1. Contents of the CSV file
Categories,Apples,Pears,Oranges,Bananas John,8,4,6,5 Jane,3,4,2,3 Joe,86,76,79,77 Janet,3,16,13,15
2. The chart initialization
// enablePolling: true,
csvURL: window.location.origin + '/studies/data.csv'
text: 'Fruit Consumption'
Loading the chart data from a HTML table is a good idea if you need to make the data available for screen readers. Place the data table below the chart container, and optionally hide it from the eye by setting
position: absolute; left: -9999em;. The screen reader will still be able to read the data. See the example on jsFiddle. Note that more sophisticated options for screen readers are available with the accessibility module.
Loading the chart data from Google Spreadsheets is a good idea if you want to set up a chart based on data that other team members should be allow to edit and keep updated. See the API docs for explanation and sample.