I am currently working on a project to create a dynamic Pie Chart that can switch between two different data series using a button.
Initially, I had success passing values directly to the setData() function when the button is clicked, as shown in this working demo.
However, when I tried to store my data in arrays and use them with the setData() function, I encountered an issue where the function would overwrite the first array with the second. This can be seen in this non-working demo.
In essence, directly using data values worked fine, as illustrated below:
// Button action
$('#button').click(function () {
var chart = $('#container').highcharts();
bool_pie = !bool_pie;
if(!bool_pie){
chart.series[0].setData([129.2, 144.0, 176.0]);
}else{
chart.series[0].setData([29.9, 71.5, 106.4]);
}
});
However, when trying to use variables (data1 and data2), the problem occurred where data1 was being overwritten by data2:
var data1 = [29.9, 71.5, 106.4];
var data2 = [129.2, 144.0, 176.0];
// Button action
$('#button').click(function () {
var chart = $('#container').highcharts();
bool_pie = !bool_pie;
if(!bool_pie){
chart.series[0].setData(data2);
}else{
chart.series[0].setData(data1);
}
});
I have been able to identify the issue, but I am currently exploring solutions to manage it effectively.