Highcharts 6.1 introduces support for setting up a live data connection to the server in a pure configuration syntax. Previously you needed to load data using ajax, then run Series.addPoint, Series.update or similar functions on success. Highcharts now does all that for you. All you need to do is to provide the link to an URL (CSV, JSON or Google Spreadsheet) and enable polling to keep it updated. This functionality is part of the data module.
Setting up dynamic data
The chart above (view it on jsFiddle) is set up in a declarative way, using no callbacks or function calls. That means a chart like that can also be created using graphical user interfaces, including Highcharts Cloud, providing that you have the dynamic backend that can serve the updated data set. For this purpose we have created a node based test server. The file vs-load.csv prints updated data from the server. Three new Highcharts options are central for making this work.
- data.csvURL points to a CSV file which is loaded into series and categories in the chart.
- data.enablePolling instructs the chart to reload the data periodically. By default, this is false, providing only a static chart.
- data.dataRefreshRate sets the refresh rate, defaulting to 2 seconds.
Shifting data
The demo above displays a single series with categorized data, where the categories are constant, but the data values change. A very common use case for dynamic charts however is a timeline where the chart shifts as new measurements come in. In this scenario, Highcharts will map the new X values (times) against the existing ones. It removes missing values and add new ones, while animating the ones that are mapped. This results in a smooth update animation where it is clear to the user how the old data relates to the new.
In addition to this, the chart will also respond to the data structure itself being changed. Columns can be removed or added, resulting on data series being removed or added.
Other sources
Dynamic data can also be loaded from other sources than CSV. The new data.rowsURL and data.columnsURL options point to JSON files containing two-dimensional arrays with tabular data. The data.googleSpreadsheetKey option can also be combined with enablePolling in order to create a live chart.
Leave a Reply