The right way to remove all series data from a high chart chart?

Question

UPDATE: here is jsfiddle that shows the problem: http://jsfiddle.net/pynju/1/

Click on the blue column on Monday. When a detailed view is loaded, note that 01-07 has 3 columns (2 expected). Click on the highest bar to return to the original view. Note that tags on xAxis are not deleted.

================

I have a histogram that has 2 series displayed as pairs of bars, side by side.

series: [{ showInLegend: false, data: dowChartData },{ showInLegend: false, data: avgUserDowChartData }], 

.

 dowChartData = [ { y: 98.74, color: '#0072ff', drilldown: { name: 'Category Engagement - Sunday', categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'], data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56], color: '#0072ff', data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724], color2: '#C00' } } AND SIMILAR 

.

 avgUserDowChartData = [ { y: 142.35, color: '#C00' }, AND SIMILAR 

The source data is the data of the day of the week with the X axis: Sunday - Monday - Tuesday - cf. - thursday - fri - saturday

There is a sweep element in the original series with new data and data2 (see above)

Using the drilldown demo code as an example, I have this code:

 column: { borderWidth: 0, cursor: 'pointer', point: { events: { click: function(event) { var drilldown = this.drilldown; if (drilldown) { // drill down setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2); } else { // restore setChart(dowChart, '', dowCategories, dowChartData); } } } }, 

Install chart handler:

 function setChart(chart, name, categories, data, color, data2, color2) { chart.xAxis[0].setCategories(categories); // chart.series[0].remove(); for (var i = 0; i < chart.series.length; i++) { chart.series[i].remove(); } chart.addSeries({ showInLegend: false, name: name, data: data, color: color || 'white' }); if (typeof(data2) != undefined && data2.length > 0) { chart.addSeries({ showInLegend: false, name: name, data: data2, color: color2 || 'white' }); } } 

The initial chart will display perfectly:

When you click on any of the blue bars (a data set with a scan), everything becomes unstable for the first 7 elements of the x axis:

As if the initial datasets are not deleted by code:

 for (var i = 0; i < chart.series.length; i++) { chart.series[i].remove(); } 

When you click on any of the bars to return to the original data set / series:

So ... it is clear that the code of the code that I am using does not work. What is the best way to completely delete the data on the diagram and the 2 series that I need to display every time, depending on what I clicked?

Answer 1

try deleting all the charts,

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

he works for me. the code

 for (var i = 0; i < chart.series.length; i++) 

will not work because chart.series.length decreases every time remove() called. So i will never reach the expected length. Hope this helps.

Answer 2

In the following way, the chart will not redraw every iteration.
This way you get the best performance.

 while( chart.series.length > 0 ) { chart.series[0].remove( false ); } chart.redraw(); 

Answer 3

Another way to delete all episodes in HighCharts with a for loop is to start from the end. Here's how to do it:

 var seriesLength = chart.series.length; for(var i = seriesLength - 1; i > -1; i--) { chart.series[i].remove(); } 

I prefer to go along this route, because using the HighStock diagram, the navigator is usually the first series. I also prefer to keep the variable set in a series of navigators. In this case, I will do the following:

 var seriesLength = chart.series.length; var navigator; for(var i = seriesLength - 1; i > -1; i--) { if(chart.series[i].name.toLowerCase() == 'navigator') { navigator = chart.series[i]; } else { chart.series[i].remove(); } } 

Now I can easily install a series of navigators.

Here is an example of removing all episodes from Highchart: http://jsfiddle.net/engemasa/srZU2/

Here's an example of resetting a HighStock chart with new data (including a number of navigators): http://jsfiddle.net/engemasa/WcLQc/

Answer 4

The reason for (var i = 0; i < chart.series.length; i++) does not work because you are modifying the array while you are looping it. To get around this, you can iterate through the array from right to left, so when you delete an element, the index of the array will still point to the last element of the array.

Using lodash forEachRight you can do:

 _.forEachRight(chart.series, chartSeries => { chartSeries.remove(false); }); chart.redraw(); 

Answer 5

Maybe just ask to redraw the chart. When you delete a series, try redrawing the chart:

 for (var i = 0; i < chart.series.length; i++) { chart.series[i].remove(true); //forces the chart to redraw } 

Answer 6

I found a working solution. Try the following:

 for (var i = 0; i < chart.series.length; i++) { chart.series[0].remove(); } chart.redraw(); 

It will completely remove all series.