show and hide chart - Javascript highcharts

Description

show and hide chart
Demo Code

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
      <style id="compiled-css" type="text/css">

.btn {/*from w  w w. ja va  2s.c  o  m*/
   background: #3498db;
   border-radius: 0px;
   font-family: Arial;
   color: #ffffff;
   font-size: 12px;
   padding: 2px 2px 2px 2px;
   text-decoration: none;
   height: 30px;
   width: 70px;
   margin-top: 5px;
   margin-bottom: 5px;
   display: block;
}
.btn.active,
.btn:active {
   background: #000000;
   text-decoration: none;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
$(document).ready(function() {
  $('.btn').click(function() {
    if ($(this).hasClass('active')) {
      $('#container').show();
      graphX();
    } else {
      $('#container').hide();
    }
    $(this).toggleClass('active');
  });
  var graphX = function graphX() {
    console.log('reload graphX')
    var data = [];
    for (var i = 0; i < 899; i++) {
      data[i] = {
        X: i
      };
    }
    var processedData = [];
    Highcharts.each(data, function(d) {
      processedData.push(Math.sin(d.X));
    });
    // Create the chart
    $('#container').highcharts('StockChart', {
      rangeSelector: {
        selected: 1
      },
      series: [{
        data: processedData,
        pointStart: Date.UTC(2010, 1, 1),
      }],
    });
  };
  graphX();
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <button type="button" class="btn">Details</button> 
      <div id="container"></div>  
   </body>
</html>
show and hide chart - Javascript highcharts

Description

Demo Code

Related Tutorials
