Question

I am writing an app that uses Highcharts, and in one instance I want to have a “slider” at the bottom of the chart that extends up vertically over the chart. Moving the slider will update other parts of the page based on where the user moves the slider on the chart.

The problem is that when drawing anything on top of the Highchart (image or a div) the performance becomes absolutely unacceptable. The slider simply cannot keep up with the mouse movements See a jsfiddle here. Note – this only happens when working with a large number of data points (which is absolutely unavoidable in my case).

Is there anything that I can do, short of not drawing on top of the chart?

Answer 1

I suspect the slowness is because the browser has to redraw the chart (either the whole thing or parts of it) as the div slides over it. With a large data set to redraw the chart from, this becomes annoyingly slow.

There are solutions, but not all of them are always acceptable:

• You can try reducing the number of points in your data set by sampling it at a lower rate.
• You can try windowing, so that the viewer only shows a range within the entire set. For example, if you have 10,000 data points your window can slide along the data set, showing only 1,500 points at a time as opposed to all 10,000 points.
• Move to a different technology such as Flash or Silverlight.

Like I said, though, not all of these or even any of them will work for you.