Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?

Question

I\'m using Highcharts to represent groups of time series. So, data points collected from the same individual are connected by lines, and data points from individuals that be

Answer 1

Rather than calling show() or hide() for each series, call setVisible(/* TRUE OR FALSE HERE */, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.

Then, after you're done changing visibilities, call chart.redraw() once.

http://api.highcharts.com/highcharts#Series.setVisible

Answer 2

The issue here is that Highcharts is redrawing the chart after every series change. I checked the API to see if there was a param you could pass to defer that, but that doesn't appear to be the case.

Instead, you can stub out the redraw method until you are ready, like so:

var _redraw = chart.redraw;
chart.redraw = function(){};

//do work

chart.redraw = _redraw;
chart.redraw();

Check out the full example here. For me, it was about 10 times faster to do it this way.