CODEWITHSUNDEEP
javascriptsvghighcharts
Scott At Rain
Scott At Rain

Reputation: 715

Animating div on top of Highcharts very slow

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?

Upvotes: 0

Views: 1291

Answers (2)

Erik Dahlström
Erik Dahlström

Reputation: 60966

I noticed that when you drag the slider over the graph it still highlights the datapoints. You probably should set pointer-events:none on that part of your chart while dragging the slider, that will allow browsers to not check pointer-events in that subtree (which if you have a lot of datapoints can be somewhat expensive, especially if you update these elements on hover).

Upvotes: 0

kevin628
kevin628

Reputation: 3526

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.

Upvotes: 1

Related Questions