Awesome

highcharts-downsample: Downsample plugin for Highcharts

• Author: Sveinn Steinarsson
• Special thanks: Borgar Þorsteinsson and DataMarket

This plugin for Highcharts downsamples data before rendering the chart. The purpose is to try retain the visual characteristics of the original line using considerably fewer data points. The algorithm (called Largest-Triangle-Three-Buckets) used in this plugin is described in a Master's thesis (see hdl.handle.net/1946/15343) in Computer Science by Sveinn Steinarsson at the University of Iceland. The topic of the thesis is how to downsample time series for visual representation and was initially suggested by DataMarket. JavaScript optimization was done with the help of Borgar Þorsteinsson.

Demo

Demo can viewed at highcharts.base.is.

Additional demo is also available in JSFiddle

Usage

series: [{
  downsample: {
    threshold: 1000 // 0 disables downsampling for this series.
  },
  data: // Your data (array of arrays with two values or array of numerical values)
}]

Notes

This plugin is mainly for downsampling line charts but might work for other types, e.g. area or column. The recommended input data format is array of arrays with two values. Array of numerical values is also supported but might be slower. Array of objects and range series are not supported!

Known limitations

• Does not support gaps (null values) in the data array.
• X-values must be in a strictly increasing order.

Articles about the algorithm (LTTB)

• The Billion Data Point Challenge by Benjamin Raskin and Nikunj Aggarwal at Uber Technologies Inc.
• An SQL implementation of the 'Largest Triangle Three Bucket' algorithm by Peter Coppens
• Visualize Big Data on Mobile by dduraz
• The Challenge of Metrics Visualization by Mark Troyer
• Downsampling data – Not a trivial task by DataMarket (The company was acquired by Qlik. Linking to archived version since the original blog is no longer accessible)
• Sampling large datasets in d3fc by William Ferguson
• Downsampling algorithms by Adrian S. Tam
• Plot your data faster without losing its shape with Elixir and ExLTTB by Riccardo Binetti
• Implementation of Downsampling Algorithm in MSChart Extension by Code Artist

The algorithm (LTTB) adapted for other programming languages or frameworks

• C# by Daniel Judge
• C# by Adrian Seeley
• MSChartExtension in C# by Code Artist
• Elixir by Riccardo Binetti
• Go by Damian Gryski
• node.js by Matej Drolc
• Java by drcrane
• Java8 by Guillermo Gutierrez Almazor
• Scala by Graham Tackley
• R by Jack Viljoen
• Javascript (without the flot plugin) by Josh Carr
• Flot Plugin by Sveinn Steinarsson
• Chart.js Plugin by Sean
• PHP by dbojdo
• Python by Olivier Devoisin
• Python + Numpy by Jack Viljoen
• Python using C by dgoeries
• Perl by troxel
• C++ by parkertomatoes
• Ruby by Julian Lübke
• Swift by Guillaume Beal
• Rust by Jerome Froelich
• Clojure by Kimmo Koskinen

Note: I have not tested all these versions and some might have different or additional features.

(Please let me know if you make your own port of the LTTB algorithm so I can list it here.)

License

highcharts-downsample is released under the terms of the MIT License.