CODEWITHSUNDEEP
javascripthighcharts
Chris
Chris

Reputation: 61

Highcharts: update series on multiple charts with same data

I have two Highcharts which 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

Upvotes: 4

Views: 2077

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

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

Upvotes: 3

Related Questions