remove all series data from a chart? - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

remove all series data from a chart?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts - Removing All Series Data</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.js"></script> 
      <style id="compiled-css" type="text/css">

.chart {/*from  w w w  .  j av a 2s .  c om*/
   height: 325px;
   margin-top: 20px;
}


      </style> 
   </head> 
   <body> 
      <div id="container" class="chart"></div> 
      <button class="addSeries">Add Series</button> 
      <button class="remove" disabled>Remove All Series</button> 
      <script type="text/javascript">
$(function() {
    var randomData = function() {
        var len = 6;
        var dataArray = [];
        for(var i = 0; i < len; i++) {
            dataArray.push(Math.floor(Math.random() * (10 - 0 + 1)) + 0);
        }
        return dataArray;
    };
   $('#container').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            formatter: function() {
                var s = '<b>' + this.x + '</b>';
                $.each(this.points, function(i, point) {
                    s += "<br /><b>" + point.series.name + ':</b> ' + point.y;
                });
                return s;
            }
        },
        yAxis: {
            max: 10
        },
       series: [{
           data: randomData()
       }]
   });
    $('.addSeries').click(function() {
        var chart = $('#container').highcharts();
        chart.addSeries({
            type: 'column',
            data: randomData()
        });
        $('.remove').removeAttr('disabled');
    });
   $('.remove').click(function() {
      var chart = $('#container').highcharts();
        var seriesLength = chart.series.length;
        for(var i = seriesLength -1; i > -1; i--) {
            chart.series[i].remove();
        }
      this.disabled = true;
   });
});

      </script>  
   </body>
</html>

Related Tutorials