0

We are displaying a highstock chart in our service where we are showing some dense data (multiple values per second possible). To avoid loading too much data for big timeranges we integrated an aggregation on serverside.

We integrated logic to reload a specific timerange when user zooms in, replacing the original aggregated data with the loaded (and more detailed) data. Zooming and replacing works fine.

Now we want to add a dynamic data load, when the user is panning/scrolling to each side. Here we run into major lags/performance issues with the chart.

example:

  • the user selects a timerange of 2 days for 4 series
  • the data is aggregated serverside to hourly averages and displayed in the chart
  • then the user zooms into a timerange under 1 hour
  • the raw data (multiple values each second possible) is displayed in the chart (with a little buffer to each side for panning)
  • now the user pans the chart to the left side to lookup what happend before his zoomed timespan
  • raw data needs to be preloaded and added to each series before the user reaches the point where the zoomed data ends

technical config:

  • mouseTracking and hover over single points is enabled (user needs this insight)
  • panning is enabled
  • navigator is never shown on this chart
  • animation is disabled
  • for triggering data load the component listens to the afterSetExtremes event (when data load is triggered, the next event triggers are ignored, until the data is loaded and put into the chart)
  • chart redraw is only triggered after the last series is updated
  • all data load is handled async
  • updatePoints on setData cannot be used since the length of the data array changes

we use typescript building an angular frontend. for that we use highcarts 8.2.2 and highcarts-angular 2.7.0 in the component which displays the chart Highstock is imported from 'highcharts/highstock'

here are screenshots i've taken from the performance tab during panning. i've marked the section where the acutal data load is done. Notice the multiple redraws before and after it (i guess for each pixel the chart is moved/panned to the side)

screenshot of perfromance tab - panning a few seconds to one side

screenshot of perfromance tab - zoom in to the one afterSetExtremes triggering data load

can i somehow increase the performance of my chart? or maybe decrease the number of redraws on panning?

felixDev
  • 1
  • Please confirm (because there is a lot going on) that your main issue is panning the raw data. I would like to be sure if I understood your issue correctly? – Karol Kołodziej Jul 27 '21 at 12:43
  • yes i can confirm, its when there is a lot of data in the chart which mostly appears with raw data – felixDev Jul 28 '21 at 13:12
  • one hour time span where there might be multiple points for each second means thousands of points. have you tried the boost module: https://www.highcharts.com/docs/advanced-chart-features/boost-module? – Karol Kołodziej Jul 29 '21 at 07:41
  • boost module is a helpful and nice option, but since panning is active it is not recommended to use it – felixDev Jul 30 '21 at 08:02
  • Why you are saying that? Panning works well with boost :) https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/line – Karol Kołodziej Aug 02 '21 at 08:09

0 Answers0