Hide series used for navigator in highstocks breaks navigator - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

Hide series used for navigator in highstocks breaks navigator

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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  ww.  j  a va2s  . c o  m*/
   Highcharts.setOptions({
      global : {
         useUTC : false
      }
   });
   // Create the chart
   $('#container').highcharts('StockChart', {
      chart : {
         events : {
            load : function() {
               // set up the updating of the chart each second
                    var chart = this;
                    var axis = chart.xAxis[0];
                    var ex = axis.getExtremes();
               var series1 = this.series[0];
                    var navigator = this.series[1];
               setInterval(function() {
                  var x = (new Date()).getTime(), // current time
                  y1 = Math.round(Math.random() * 100);
                        y2 = Math.round(Math.random() * 100);
                  series1.addPoint([x, y1], false, false);
                        navigator.addPoint([x, y2], false, false);
                        axis.setExtremes(x - (ex.max- ex.min),x,false);
                        chart.redraw();
               }, 1000);
                    //setInterval(function() {
                    //    series1.hide();
                    //},10000);
            }
         }
      },
      rangeSelector: {
         buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
         }, {
            count: 5,
            type: 'minute',
            text: '5M'
         }, {
            type: 'all',
            text: 'All'
         }],
         inputEnabled: false,
         selected: 0
      },
      title : {
         text : 'Live random data'
      },
      exporting: {
         enabled: false
      },
        navigator: {
            series: {
                type: 'areaspline',
                color: '#4572A7',
                fillOpacity: 0.4,
                dataGrouping: {
                    smoothed: true
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                data: (function() {
                    var data = [], time = (new Date()).getTime(), i;
                for( i = -100; i <= 0; i++) {
                   data.push([
                         time + i * 1000,
                       Math.round(Math.random() * 100)
                    ]);
               }
                 return data;
             })()
            }
        },
      series : [{
         name : 'Random data',
         data : (function() {
            // generate an array of random data
            var data = [], time = (new Date()).getTime(), i;
            for( i = -100; i <= 0; i++) {
               data.push([
                  time + i * 1000,
                  Math.round(Math.random() * 100)
               ]);
            }
            return data;
         })()
      }]
   });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="container" style="height: 500px; min-width: 500px"></div>  
   </body>
</html>

Related Tutorials