I can update the data value of a spider chart and see it animated using this method:
chart.series[i].setData(newSeries[i].data);
But, as the series in a spider chart consists not only of data but also other fields, as in
series: [{ name: 'Allocated Budget', data: [43000, 19000, 60000, 35000, 17000, 10000], pointPlacement: 'on' }, { name: 'Actual Spending', data: [50000, 39000, 42000, 31000, 26000, 14000], pointPlacement: 'on' }]
Along with the data, when I need to change the value name: 'Actual Spending' , how can I update the series with animation?
Because, for example if I call:
chart.series[i].update({series: newSeries[i] , name : newName});
There won't be any animation.
If it is still unclear... Well, sometimes a jsfiddle is worth a 100 words.
Update the name, then set the data with the desired animation:
chart.series[0].update({name:'new title'}); chart.series[0].setData(newData);
See working fiddle.
Since the correct answer did not work for me with multiple series, I had to do it more similar to this:
First update the names since it's a quicker operation without animation.
// Pass false to skip redraw (since there are multiple operations, for better performance) chart.series[0].update({name:'new title 0'}, false); chart.series[1].update({name:'new title 1'}, false); chart.series[2].update({name:'new title 2'}, false); chart.series[3].update({name:'new title 3'}, false); // Redraw the name changes before updating the data. chart.redraw(); // Update the series data with animation, passing false to redraw here as well. chart.series[0].setData(newData, false); chart.series[1].setData(newData1, false); chart.series[2].setData(newData2, false); chart.series[3].setData(newData3, false); // Now we redraw the series data chart.redraw();
翻译