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 data one at a time. Once a chart is created, its only re-running the same code again so the labels etc don't change - only the [pointStart] and the [data] change.

Is there a way to update all the data as a whole? I also haven't managed to get a for loop to work correctly.

function generateSeries(data){
    var cData = [];
    var rollup = data.rollupData;
    cData['type'] = 'line';
    cData['pointStart'] = convertDateTime(data.lastMinute);
    cData['pointInterval'] = 60 * 1000;
    for(var i in rollup){
        var x = new Array();
        var v = rollup[i].rttSystem;
        switch(v){
            case('line'): var vn = ' (L)'; break;
            case('node'): var vn = ' (N)'; break;
            case('module'): var vn = ' (M)'; break;
            default: var vn = '';
        }
        x['name'] = rollup[i].rollupName + vn;
        x['data'] = rollup[i].kpiData;
        cData.push(x);
    }
    return cData;
}

the ouput of the array looks like [0: ['name': 'California', 'data': [0.002, 0.003 ...],1: ['name':'Oklahoma', 'data': [0.001, 0.002 ...], 'type': 'line', 'pointStart':'','pointInterval':60 * 1000]

var chart = new Highcharts.Chart({
    chart: {
    ...
    },
    series: generateSeries(data)
    }, function(chart){
        setInterval(function(){
            var newSeries = generateSeries(data);
            // Udate the series again with the current data
        },60000);
    }
});

Update: this does the series but not the pointStart.

if(chart.series.length > 1){
    var s = 0;
    for(var i in newSeries){
        chart.series[s].setData(newSeries[i].data);
        chart.series[s].pointStart = newSeries[i].pointStart;
        s++;
    }
}else{
    chart.series[0].setData(newSeries[0].data);
    chart.series[0].pointStart = newSeries[0].pointStart;
}

Have you tried use setData() api.highcharts.com/highstock#Series.setData() ? — Sebastian Bochan
– Sebastian Bochan, Commented May 7, 2013 at 13:46
See above update - this will update the data but not the pointStart — jbolanos
– jbolanos, Commented May 7, 2013 at 15:49

StuR · Accepted Answer · 2013-05-07 16:18:40Z

30

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.

answered May 7, 2013 at 16:18

StuR

12.3k9 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jbolanos Over a year ago

When I try this I get the error: TypeError: chart.series[0].update is not a function

jbolanos Over a year ago

whoops - was using old version of Highcharts - updated to 3.0.1 and now the last 2 days were a complete waste of time - thanks :)

EMahan K Over a year ago

How to update visible:false

Benjamin Crouzier · Accepted Answer · 2016-09-06 16:01:03Z

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.

Collectives™ on Stack Overflow

Highchart series update in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related