CODEWITHSUNDEEP
javascriptchartshighcharts
rksh
rksh

Reputation: 4050

Add more data to High-chart X axis

I'm trying to live update a chart using highchart, the chart is updated every 2 seconds using a setInverval function and adding data using .addPoint like this.

setInterval(function (data) {
    var inf = parseInt(data.stat);
    chart_data.addPoint([x,purple], true, true);
},2000);

Everything is working fine except that the chart doesn't hold too much data and every second the previous added data is being pushed to disappear so it's not holding enough data. I want the chart to hold more data before older data is being cleared off. Like holding the data for the last 5 minutes and once new data is added every 2 seconds the data added 5 minute before is being cleared off.

Currently the chart looks like this,

enter image description here

xAxis: {
    type: 'datetime',
    tickPixelInterval: 10
       },

Apparently lowering tickPixelInterval doesn't seem to help either. How can I fix it? Thanks

Upvotes: 0

Views: 67

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7896

You are using:

chart_data.addPoint([x,purple], true, true);

Second true is shift argument (see API: http://api.highcharts.com/highcharts#Series.addPoint) and will cause series to drop first data points as the newest is being added. To avoid this you can check if there is enough data, to perform the shift. E.g 2 seconds * 150 = 5 minutes (300 seconds), so if addPoint is called 151 time and later then shift argument should be true and false otherwise.

Upvotes: 1

Related Questions