highcharts series remove function deletes all original series data (even after stored in new variable)

Question

Whenever I call series.remove() in my highcharts drilldown function the chart series is removed and unset as expected. However, I need to store that original chart data in order to "drill back up."

I've saved the data into another variable, but calling remove also unsets the data that I stored in that variable. I'm guessing it is being stored by reference somehow?

I've tried to copy the data using a jquery function but the data is still being wiped by the highcharts series.remove() function.

Here's my onclick code:

function() {

    var drilldown = this.series.options.drilldownSeries;

    if (drilldown) {
        setChart(drilldown[this.category]);
    }
    else {
        setChart('drillUp');
    }
}

And here's my setChart code:

window.rhChartDataBank = {};

function setChart(data) {

    if (data !== 'drillUp'){

        //HERE'S WHERE i TRY TO COPY THE DATA TO ANOTHER PLACE
        if (window.rhChartDataBank._originalData === undefined || window.rhChartDataBank._originalCategories === undefined){

            var series0 = jQuery.extend(true, {}, hChart.series[0].data),
            series1 = jQuery.extend(true, {}, hChart.series[1].data);

            window.rhChartDataBank._originalData = [];
            window.rhChartDataBank._originalCategories = [];

            window.rhChartDataBank._originalData.push(series0);
            window.rhChartDataBank._originalData.push(series1);
            window.rhChartDataBank._originalCategories = hChart.series[0].xAxis.categories;
        }

        //Remove current series
        while(hChart.series.length > 0){
            hChart.series[0].remove(false);
        }

        //Set new categories
        var newCategories = [];
        for (var i = 0; i < data.length; i++) {
            newCategories.push(data[i].data.x);
        }

        //Set new data
        var newData = [];
        for (var i = 0; i < data.length; i++) {
            newData.push(data[i].data.y);
        }

        hChart.xAxis[0].setCategories(newCategories, false);

        hChart.addSeries({
            type: 'column',  
            data: newData,
        }, false);

        hChart.redraw();
    }
    else{
        //Remove current series
        while(hChart.series.length > 0){
            hChart.series[0].remove(false);
        }

        //BY THE TIME THIS RUNS window.rhChartDataBank._originalData is full of only null values.

        //Set old categories
        var oldCategories = [];
        for (var i = 0; i < window.rhChartDataBank._originalCategories.length; i++) {
            oldCategories.push(window.rhChartDataBank._originalCategories[i]);
        }

        //Set old data
        var oldData = [];
        for (var i = 0; i < window.rhChartDataBank._originalData[0].length; i++) {
            oldData.push(window.rhChartDataBank._originalData[0][i]['y']);
        }

        hChart.xAxis[0].setCategories(window.rhChartDataBank._originalCategories, false);

        //ADDING IN DUMMY DATA FOR NOW SINCE I CAN'T GET DATA FROM ORIGINAL CHART...
        var ddddata = [45,20,70];

        hChart.addSeries({
            type: 'column',  
            data: ddddata,
        }, false);

        hChart.redraw();
    }
}

Have you tried to use $.extend() to keep "original" variable instance? — Sebastian Bochan

danielepolencic danielepolencic · Accepted Answer · 2013-08-15T21:16:25

since hChart.series is an array, you can easily clone the array with

var backup_series = hChart.series.slice(0);

So you can restore the original series when needed.

highcharts series remove function deletes all original series data (even after stored in new variable)

1 Answers