2

See my screenshot. How do I make a button/link which show/hide or toggle off all series at once?

So when I click the button it toggles off the 3 series (Mannen, Vrouwen, Totaal) at once.

I think I have to do something in the Highcharts legendItemClick function?

Update:

I added below code to my existing JS file, but I don't get any result?

_showHideSeries: function (chart) {

        $button = $('#button');

        $button.click(function() {
            var series = chart.series[0];
            if (series.visible) {
                $(chart.series).each(function(){
                    //this.hide();
                    this.setVisible(false, false);
                });
                chart.redraw();
                $button.html('Show series');
            } else {
                $(chart.series).each(function(){
                    //this.show();
                    this.setVisible(true, false);
                });
                chart.redraw();
                $button.html('Hide series');
            }
        });


      },

enter image description here

meez
  • 3,783
  • 5
  • 37
  • 91

2 Answers2

4

You can loop through your series, and use the series.hide() and `series.show() functions:

    $(document).on('click', '#hide-all', function() {
        $.each(chart.series, function(i, ser) {
            ser.hide();
        });
    });

Fiddle:

Reference:

jlbriggs
  • 17,612
  • 4
  • 35
  • 56
  • Thanks. Great. How do I integrate this in my current js file? It's a Drupal 7 site. Do I have to add the hide-all functions in the `plotOptions: { series: { events: { ....`? – meez Oct 20 '16 at 07:49
  • Can you set up a fiddle demonstrating the problem? – jlbriggs Oct 20 '16 at 12:13
  • I made [this fiddle](https://jsfiddle.net/meez/6rL2y4u6/), but I don't understand how I can make my Highcharts work in the fiddle even without my function to show/hide all series... – meez Oct 21 '16 at 06:01
  • There is an awful lot going on in that fiddle that is going to make it difficult to troubleshoot. Also, I am confused as to why you've included the full SVG for the chart in the HTML section? That is bound to further complicate everything. – jlbriggs Oct 21 '16 at 14:12
3

Better use- (works much faster)

$(chart.series).each(function(){
    //this.hide();
    this.setVisible(false, false);
});
chart.redraw();

Thanks to this genius-

How can i hide all the Series in highcharts at a time

Zvi Redler
  • 1,708
  • 1
  • 18
  • 29