HighStock - Removing All Series Data

Properly remove all data from the stockchart

by Ramkumar Pillai

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" class="chart"></div>

<button class="addSeries">Add Series</button>
<button class="remove" disabled>Remove All Series and Populate With a New Series</button>

CSS

.chart {
    height: 325px;
    margin-top: 20px;
}

JavaScript

$(function() {
    // Global Variable for the Navigator Series
    var navigatorSeries;
    
    var randomData = function() {
        var len = 20;
        var dataArray = [];
        for(var i = 0; i < len; i++) {
            // Push a random integer between 0 and 10 into the array
            dataArray.push(Math.floor(Math.random() * (10 - 0 + 1)) + 0);
        }
        return dataArray;
    };
    
	$('#container').highcharts('StockChart', {
        chart: {
            type: 'spline',
        },
        credits: {
            enabled: false
        },
        rangeSelector: {
            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;
            }
        },
	    series: [{
	        data: randomData()
	    }]
	});
    
    $('.addSeries').click(function() {
        var newData = randomData();
        var chart = $('#container').highcharts();
        chart.addSeries({
            data: newData
        });
        $('.remove').removeAttr('disabled');
    });
    
	$('.remove').click(function() {
		var chart = $('#container').highcharts();
        var seriesLength = chart.series.length;
        for(var i = seriesLength -1; i > -1; i--) {
            if(chart.series[i].name.toLowerCase() == 'navigator') {
                navigatorSeries = chart.series[i];
            } else {
                chart.series[i].remove();
            }
        }
        var newData = randomData();
        chart.addSeries({
            data: newData
        });
        navigatorSeries.setData(newData);
		this.disabled = true;
	});
});