Question

Not really sure what’s going on with my code but I’m having trouble removing all of the series in highcharts after I drilldown. When I call the resetChart function it only ever removes 2 out of the 4 series, I set up a temporary alert to tell display what its deleting and it only alerts for 2 series.

However when I remove the line chart.series[i].remove(); all 4 of the alerts work.
I’ve tried a few ways of looping the array, even put it in reverse but it makes no difference.

if you copy the below code into jsfiddle you will see what I mean

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>

JQuery

$(function() {
var chart;

var colors = Highcharts.getOptions().colors,
    categories = ['October', 'November'],
    name = 'Monthly',
    data = [{
        y: 22,
        drilldown:[{
            name: 'Income',
            data: [12, 0],
            categories: ['Income', 'Expenses']
        }, {
            name: 'Expenses',
            data: [0, 5]
        }, {
            name: 'Employee',
            data: [0, 3]
        }, {
            name: 'Tax Office',
            data: [0, 1]
        }]
    }, {
        y: 21
    }];
function setChart(drilldown) {
    $.each(chart.series, function(i, val) {
        val.remove();
    });
    if(drilldown) {
        chart.xAxis[0].setCategories(drilldown[0].categories);
        $.each(drilldown, function(i, val) {
            chart.addSeries({
                 name: val.name,
                 data: val.data
            }, false);
        });
    }

    chart.redraw();
}
function resetChart() {
    //chart.toolbar.remove('RESET');
    $.each(chart.series.reverse(), function(i) {
        alert('removing :' + chart.series[i].name);

        // IF I REMOVE THE BELOW LINE, ALL ALERTS DISPLAY CORRECTLY
        chart.series[i].remove();
    });

     chart.xAxis[0].setCategories(categories);
     chart.addSeries({
          name: name,
          data: data
     });
     chart.redraw();
}

chart = new Highcharts.Chart({
    chart: {
        spacingLeft: 5,
        spacingRight: 5,
        spacingBottom: 5,
        renderTo: 'container',
        type: 'column'
    },
    title: false,
    xAxis: {
        categories: categories
    },
    yAxis: {
        title: false,
        labels: {
            formatter: function() {
                str = '$' + this.value + '';
                return str.replace('$-', '-$');
            }
        },
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            cursor: 'pointer',
            stacking: 'normal',
            point: {
                events: {
                    click: function () {
                        var drilldown = this.drilldown;
                        if (drilldown) { // drill down;
                            setChart(drilldown);
                        }
                    }
                }
            }
        }
    },
    tooltip: {
        formatter: function() {
           var point = this.point,
              s = '<b>$' + this.y +'</b>';
              s = s.replace('$-', '-$');
           if (point.drilldown) {
              s += ': Click to view '+ point.category +'';
           }
           return s;
         }
    },
    series: [{
        name: name,
        data: data
    }]
});
chart.toolbar.add('RESET', 'Reset', 'chartReset', resetChart);
});

Answer 1

FIXED

Instead of using each I used while.
When series was removed it was removing it from the array, so the array was getting smaller

each time remove() was called.

Replaced both instances of each (in setChart and resetChart):

$.each(chart.series.reverse(), function(i) {
    chart.series[i].remove();
});

With:

 while(chart.series.length > 0)
 chart.series[0].remove();