CODEWITHSUNDEEP
javascripttypescriptechartsapache-echarts
wrf
wrf

Reputation: 98

ECharts 5: Display of a large number of data points

I am developing an Apache ECharts based application that is supposed to display a very large number of data points in a line chart. There may well be millions of data points. The X-axis represents the time and the Y-axis the value. The "xAxis->data" option is not used. The series is configured as follows:

let option = {
    series: [
        type: 'line',
        data: [[time1, value1], [time2, value2], ...]
    ]
}

As long as the viewport (DataZoom) is scaled in and, let's say, shows less than 4000 points, then the left/right scrolling and zooming of the chart behaves smoothly.

However, if you zoom out and the chart has to display more than 10,000 data points, then it starts to become sluggish.

It is always the case that the further you zoom out, the fewer data points are required, to display a graph in a meaningful way. As the number of data points does not currently change, the system is overloaded.

In order to keep the graph fluid and performant at all times, it is advisable to "thin out" the data, e.g. by using the Ramer-Douglas-Peucker algorithm: https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm

Now to my questions:

  1. Does Echarts offer anything in this regard to somehow dynamically reduce the amount of visible data? E.g. through some filter mechanism?

If not, then the approach could be to pass a reduced set of data to Echarts. So that ECharts can/should constantly work with 2,000 - 5,000 data points, regardless of whether you zoom in or out.

In this case, the ECharts series data should be replaced when zooming and scrolling, so that these 2,000 - 5,000 data points are always used for a specific time range.

  1. The question in this case is now, are there any examples of the best way to implement something like this? It gets tricky because you not only have to set the data points again and again when scrolling/zooming, but presumably also have to reconfigure the DataZoom again and again.

Ideally, the DataZoom slider should take the entire temporal range into account, so that the user does not notice anything when scrolling and zooming, that the data is constantly changing in the background.

Upvotes: 1

Views: 2196

Answers (1)

Matthias Mertens
Matthias Mertens

Reputation: 2551

  1. For series type 'line' there exists a property sampling which does what you are asking for. I dont know how well it is performing tho.
  1. If we limit our example to the slider for the x-axis I would do the following:
  • create an invisable helper xAxis (show: false)
  • set axis type to 'category' and fill it with some data that represents the xAxis well
  • compute new data based on the dataZoom event

Example:

const data = [[0,150], [1,230], [2,224], [3,218], [4,135], [5,147], [6,260]];

option = {
  dataset: [
    {source: data}
  ],
  xAxis: [
    {type: 'value'},
    {
      type: 'category',
      show: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: {
    type: 'value'
  },
  dataZoom: {type: 'slider', xAxisIndex: 1, realtime: false},
  series: [
    {
      type: 'line'
    }
  ]
};

myChart.on('dataZoom', function(params) {
  // do your computation and replace dataset
  
  const startIndex = Math.floor(params.start * 0.01 * 7);
  const endIndex = Math.floor(params.end * 0.01 * 7);
  
  const newData = data.slice(startIndex, endIndex);
  
  myChart.setOption({dataset: [{source: newData}]});
});

Upvotes: 0

Related Questions