Maintain series visibility after chart reload - Javascript highcharts

Javascript examples for highcharts:Chart Series

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Series

Description

Maintain series visibility after chart reload

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {// w  w  w  .j  a  v  a2s  .co  m
    var visible = getCookie('HCseriesVisible');
    console.log(visible);
    function saveSeriesState(cvalue) {
        var d = new Date();
        d.setTime(d.getTime() + (365*24*60*60*1000)); // 1 year coockie
        var expires = "expires="+d.toUTCString();
        document.cookie = "HCseriesVisible=" + cvalue + "; " + expires;
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';'),
            len = ca.length;
        for(var i=0; i<len; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                var ret = c.substring(name.length,c.length);
                ret = ret.split('X');
                $.each(ret, function(i,v) {
                    ret[i] = (v === 'f') ? false : true;
                });
                return ret;
            }
        }
        return [true,true,true,true];
    }
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                events: {
                    legendItemClick: function () {
                        var visibility = '',
                            seriesIndex = this._i;
                        $.each(this.chart.series, function(i,v) {
                            if(i == seriesIndex) {
                                visibility += v.visible ? 'fX' : 'tX';
                            } else {
                                visibility += v.visible ? 'tX' : 'fX';
                            }
                        });
                        saveSeriesState(visibility);
                    }
                }
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 194.1, 95.6, 54.4],
            visible: visible[0]
        },{
            data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            visible: visible[1]
        },{
            data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            visible: visible[2]
        },{
            data: [129.9, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            visible: visible[3]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials