Does highcharts (or vaadin) have built-in abilitie

Question

Using Vaadin's charts (which ultimately uses HighCharts), I'm trying to plot a line graph with over 10,000 points. It actually works reasonably quickly (a couple seconds to plot). However, I wonder if it can be much faster, as I came accross a similar problem when using JavaFx charts and discovered that people have implemented a solution using the "Ramer–Douglas–Peucker algorithm" to reduce the number of datapoints in such a manner that it's basically noticeable to the human eye when its graphed. (Here's the original answer from SO: Performance issue with JavaFX LineChart with 65000 data points).

So, does highcharts already have such built in functionality? If not, does Vaadin? Or, do I need to recreate this logic in Vaadin, which means I ultimately need to find a Java library for the Ramer–Douglas–Peucker algorithm....

Answer 1

Unfortunately, Highcharts doesn't have "Ramer–Douglas–Peucker algorithm" built-in. However, it has a boost module which allows rendering thousands of points in milliseconds.

The Boost module allows certain series types to be rendered by WebGL instead of the default SVG. This allows hundreds of thousands of data points to be rendered in milliseconds. In addition to the WebGL rendering, it saves time by skipping the processing and inspection of the data wherever possible.

API reference:

• https://api.highcharts.com/highcharts/boost

Demo:

• https://www.highcharts.com/demo/line-boost

---

What's more, using Highstock you can use dataGrouping.

Data grouping is the concept of sampling the data values into larger blocks in order to ease readability and increase performance of the JavaScript charts.

API reference:

• https://api.highcharts.com/highstock/series.line.dataGrouping

Demo:

• https://www.highcharts.com/stock/demo/data-grouping

Answer 2

With most of the chart types when you ise Vaadin charts it actually makes more sense to apply algorithm to reduce number of data points in your server side logic, e.g when copying data from original data dourse to DataSeries you use in the chart. This does not only reduce rendering time, but time to load the data to browser as well.

I would also recommend to calculate linear regression as additional two point DataSeries on server side if such thing is needed.