Highcharts: update series on multiple charts with same data

user_7079003 0
Viewed 1395

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

highcharts javascript
1 Answers

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

user_89513770
Related