CODEWITHSUNDEEP
javascripthighcharts
Florent
Florent

Reputation: 1928

How to set new data then reverse to original data in Highcharts?

I have two arrays I would like to display in Highcharts with custom buttons : Day and Week.

To reset the chart and display the original data I need a reset button but my problem is that it fails to render this specific array (original_data).

What could be the reason of this issue and how can I sort it out ?

Thank you,

JSFiddle

original_data = [1, 2, 3, 4, 5];
new_data1 = [6, 7, 6, 7, 6];
new_data2 = [15, 14, 13, 12, 11];

var mychart = Highcharts.chart('container', {
    series: [{
            name: 'Total',
            data: original_data,
            type: 'area'
        }
        ],
    exporting: {
            buttons: {
                first_Button: {
                    text: 'Day',
                    onclick: function () {
                        mychart.series[0].setData(new_data1);
                    }
                },
               second_Button: {
                    text: 'Week',
                    onclick: function () {
                        mychart.series[0].setData(new_data2);
                    }
                },
                third_Button: {
                    text: 'Reset',
                    onclick: function () {
                        mychart.series[0].setData(original_data);
                    }
                }
            }
        }
});

Upvotes: 1

Views: 46

Answers (1)

Kuba
Kuba

Reputation: 1455

You passed original_data in configuration object. Now everytime you call setData(new_data) you override original_data cause it works as reference.

So when you click 'Week' button in the background it looks like:

original_data = new_data2;

The solution is to pass clone of original_data in configuration object. Example: JSFiddle

Upvotes: 1

Related Questions