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 belong to the same group share the same color. The Highcharts legend displays each individual time series instead of groups, and I have over a hundred time series, to it's ugly and impractical to hide and show data that way.

Instead I made buttons and used jQuery to associate them with functions that would search for matching colors among the time series and toggle the visibility of each matching series.

Here is an example with a small dataset: /

Here is the series-hiding function from that example:

$("#button").click(function() {
    if ($(this).hasClass("hideseries")) {
        hs = true;
    } else {
        hs = false;
    }
    $(chart.series).each(function(idx, item) {
        if (item.color == 'green') {
            if (hs) {
                item.show();
            } else {
                item.hide();
            }
        }
    });
    $(this).toggleClass("hideseries");
});

The above works. The problem is, my real data can have over a hundred individual time series and it looks like checking the color of each series is really slow. So, can anybody suggest a more efficient way to solve this problem? Are there some built-in Highcharts methods that already do this? Or, can I give jQuery a more specific selector?

I tried digging into the <svg> element created by Highcharts but I can't figure out which child elements correspond to the series in the chart.

Thanks.

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 belong to the same group share the same color. The Highcharts legend displays each individual time series instead of groups, and I have over a hundred time series, to it's ugly and impractical to hide and show data that way.

Instead I made buttons and used jQuery to associate them with functions that would search for matching colors among the time series and toggle the visibility of each matching series.

Here is an example with a small dataset: http://jsfiddle.net/bokov/VYkmg/6/

Here is the series-hiding function from that example:

$("#button").click(function() {
    if ($(this).hasClass("hideseries")) {
        hs = true;
    } else {
        hs = false;
    }
    $(chart.series).each(function(idx, item) {
        if (item.color == 'green') {
            if (hs) {
                item.show();
            } else {
                item.hide();
            }
        }
    });
    $(this).toggleClass("hideseries");
});

The above works. The problem is, my real data can have over a hundred individual time series and it looks like checking the color of each series is really slow. So, can anybody suggest a more efficient way to solve this problem? Are there some built-in Highcharts methods that already do this? Or, can I give jQuery a more specific selector?

I tried digging into the <svg> element created by Highcharts but I can't figure out which child elements correspond to the series in the chart.

Thanks.

• javascript
• jquery
• highcharts

2 Answers 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.

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