Unable to delete all "rows" in highcharts

Question

Not sure what is happening with my code, but I had problems deleting the entire series in highcharts after I deployed. When I call the resetChart function, it only deletes 2 of the 4 series, I set up a temporary warning to inform that it is being deleted, and it only warns of 2 series.

However, when I delete the line chart.series[i].remove(); All 4 alerts work. I tried several ways to loop the array, even put it in the reverse order, but that doesn't make any difference.

if you copy the code below in 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 everyone that I used at that time. When the series was deleted, it removed it from the array, so the array became smaller

every time remove () is 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();