Highcharts: update series on multiple charts with same data
Question
i have 2 Highcharts wich have no data in the series when they are created. In a later step these charts are filled via the update-function. The first time i do this, all works perfectly ("First Data"-Button in fiddle).
If i repeat this step with other data, only the first Chart is updating correctly ("New Data-Button in fiddle).
http://jsfiddle.net/ChrisCross82/v34fn2zj/
Can someone explain why the second chart is not updating? Maybe I'm just missing something?
<body>
<button onclick="firstData()">First Data</button>
<button onclick="newData()">New Data</button>
<div id="chart1" style="height: 300px"></div>
<div id="chart2" style="height: 300px"></div>
</body>
<script>
var chart1;
var chart2;
chart1 = Highcharts.chart('chart1', {
series: [{
data: [],
}, {
data: [],
}]
});
chart2 = Highcharts.chart('chart2', {
series: [{
data: [],
}, {
data: [],
}]
});
function firstData() {
var series1 = [3, 3, 3, 3, 3];
var series2 = [4, 4, 1, 2, 0];
updateChart(series1, series2);
}
function newData() {
var series1 = [4, 4, 4, 4, 4];
var series2 = [2, 1, 1, 1, 0];
updateChart(series1, series2);
}
function updateChart(series1, series2){
chart1.update({
series: [{
data: series1
}, {
data: series2
}]
});
chart2.update({
series: [{
data: series1
}, {
data: series2
}]
});
console.log(series1, series2);
}
</script>
Thanks a lot, Chris
1 answers
solution1
2 2018-11-06 12:14:48
For better performance Highcharts use reference to data and mutate options.data object. So, when the first chart is updated, the second has already changed options and update does not cause any effect. The solution is to do not use the same object:
function updateChart(series1, series2){
chart1.update({
series: [{
data: series1
}, {
data: series2
}]
});
chart2.update({
series: [{
data: series1.slice()
}, {
data: series2.slice()
}]
});
}
Live demo: http://jsfiddle.net/BlackLabel/wov6k8ye/
This problem is reported on Highcharts github, but it is not marked as a bug: https://github.com/highcharts/highcharts/issues/9294
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.