Highchart series update in javascript

Question

I\'m trying to update a Highchart series by generating a new array with the current data from the database. But for some reason I can only find info about going through the

Answer 1

To update a chart I usually do this:

chart.series[0].update({
    pointStart: newSeries[0].pointStart,
    data: newSeries[0].data
}, true); //true / false to redraw

Try calling redraw after the update.

Answer 2

In my case, I want to initialise my chart before the data is available. So I initialise my chart with an empty series, and then I update it with addSeries.

Full jsFiddle here: https://jsfiddle.net/qyh81spb/

My chart receives the data 2 seconds after being initialized:

MyChartComponent.initHighcharts();
setTimeout(function() {
  MyChartComponent.setDataFromApi();
  MyChartComponent.updateChart();
}, 2000);

So I initialise it with an empty series:

initHighcharts: function() {
  this.chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    },
    ...
    series: [] // initialisation with empty series. This is intentional
  });
},

And whenever the data is available, I do this:

updateChart: function() {
  this.dataFromApi.forEach(function(serie) { // for each row of data, add a series
    this.chart.addSeries(serie, false); // false is to prevent redrawing
  }.bind(this));
  this.chart.redraw(); // manually redraw
  this.chart.hideLoading(); // stop loading if showLoading() was call before
},

See the jsfiddle above for the full code details.