5

I have a highchart displaying multiple series, each contains 100+ data points I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place Does anyone know how to handle this? Thanks

Britboy
  • 481
  • 2
  • 5
  • 10
  • Do you have a demo ? It works good for me. – Ricardo Alvaro Lohmann Feb 05 '13 at 18:04
  • Yes - but how do I publish a large file to stackOverflow – Britboy Feb 05 '13 at 20:21
  • Use jsfiddle and provide only the necessary code, or try to reproduce the problem using some highcharts demo. – Ricardo Alvaro Lohmann Feb 05 '13 at 20:46
  • Which browser do you use? – Sebastian Bochan Feb 06 '13 at 08:19
  • its any browser - IE, FF, Chrome – Britboy Feb 06 '13 at 12:36
  • http://jsfiddle.net/XaCMW/2/ If you click check box C you will notice that the checkbox takes some time to toggle this is whilst the chart line is being hidden or shown, if you start at the top and click each one in turn its very slugish. Basically the browser thread is too busy working on the chart that it doesnt get time to repaint the checkboxes - which doesnt give a very good user experience. Hope that makes sense – Britboy Feb 06 '13 at 12:51
  • Have you seen built-in checkbos for legend? http://api.highcharts.com/highstock#plotOptions.series.showCheckbox also I suggest to change turbothreshold paramter http://api.highcharts.com/highstock#plotOptions.series.turboThreshold. You can also disable animations / shadows and check it. – Sebastian Bochan Feb 07 '13 at 14:22

3 Answers3

15

Rather than calling hide() for each series, call setVisible(false, 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

philfreo
  • 41,941
  • 26
  • 128
  • 141
2

as answered in:

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

  • highcharts draw each time a show or hide is called;

  • disabling and enabling the redraw function worked for me;

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

//do work

this.chart.redraw = _redraw;
this.chart.redraw();
Community
  • 1
  • 1
umuero
  • 21
  • 3
0

How about adding visible: false for the series that are hidden before calling Highcharts.chart()? Please see references: 1. Highcharts API and 2. Demo

In my case, above approach showed the best performance comparing to the followings:

  1. series.hide()
  2. setVisible(false, false)
  3. setVisible(false, true) or setVisible(false, false); redraw();
Dongwook Kim
  • 69
  • 1
  • 10