HighChart spline live update data with old data issue

Question

I am using Highchart to show my live activity on a current meter, I have 4 parameters like Three phase voltage, Amp, Single Phase voltage and Total Power On initializing the chart I have ajax request to get last 20 records and appending them all in the chart like below

var dataset1 = [];
var dataset2 = [];
var dataset3 = [];
var dataset4 = [];  

var baseUrl = $('#base').val();
$.ajax({
        url: baseUrl+"dashboard/voltampGraph",
        type: 'POST',
        async: false,
        dataType: "json",
        success: function (data) {
            console.log(data);
          for (var i = 0; i < data.length; i++) {
          //console.log(data[i]._source.created);
          dataset1.push([data[i]._source.created,data[i]._source.tpv]);
          dataset2.push([data[i]._source.created,data[i]._source.tc]);
          dataset3.push([data[i]._source.created,data[i]._source.tv]);
          dataset4.push([data[i]._source.created,data[i]._source.tp]);
         }

        }
    });


var myChart = Highcharts.chart("linechart", {
  chart: {
    type: "spline"
  },
  title: {
    text: "Consumption"
  },
  yAxis: {
    title: {
      text: "Values",
    }
  },
     xAxis: {
      type: 'datetime',
      tickPixelInterval: 150
    },
  series: [
    {
      name: "Three phase voltage",
      data: dataset1
    },
    {
      name: "Amp",
      data: dataset2,
    },
    {
      name: "Single Phase voltage",
      data: dataset3,
    },
    {
      name: "Total Power",
      data: dataset4,
    }
  ]
});

There is no issue with this graph is looks good for the data we loaded, But I have to update the live data from the server which I am getting every 5 seconds using $.post

 setInterval(function() {
$.post(baseUrl+"dashboard/voltampMsg",function(data) {
    if(data.status=="success"){
        myChart.series[0].addPoint([data.data.created,data.data.tpv], true, true);
        myChart.series[1].addPoint([data.data.created,data.data.tc], true, true);
        myChart.series[2].addPoint([data.data.created,data.data.tv], true, true);
        myChart.series[3].addPoint([data.data.created,data.data.tp], true, true);
    }
},"json");
myChart.redraw();
}, 5000);

This also working fine as we load the data to the chart, but when we see visualization there is 2 spline for each parameter, means the old one which we loaded previously also visible in the chart. Please refer attached image

The reason I am loading the 1st set of data is, I can't initialize the chart without any data if I assign empty data set then the next set of data's are not updating dynamically

Is there any way to update live data to highcharts without old data set? Dataset on init:

TPV :1531834002399 413.65
TC :1531834002399 0.279667
TV :1531834002399 227.8767
TP :1531834002399 43.671
TPV :1531833983914 413.6233
TC :1531833983914 0.279
TV :1531833983914 227.8367
TP :1531833983914 43.67167
TPV :1531833968099 413.62
TC :1531833968099 0.279
TV :1531833968099 227.75
TP :1531833968099 43.672
TPV :1531833952811 413.54
TC :1531833952811 0.277667
TV :1531833952811 227.78
TP :1531833952811 43.67134
TPV :1531833933943 413.1267
TC :1531833933943 0.283667
TV :1531833933943 227.5567
TP :1531833933943 43.671
TPV :1531833916201 414.9167
TC :1531833916201 0.288333
TV :1531833916201 228.57
TP :1531833916201 43.67267
TPV :1531833880529 412.6566
TC :1531833880529 0.272333
TV :1531833880529 227.2567
TP :1531833880529 43.673
TPV :1531833859568 412.6566
TC :1531833859568 0.272333
TV :1531833859568 227.2567
TP :1531833859568 43.673
TPV :1531833844129 412.5934
TC :1531833844129 0.271
TV :1531833844129 227.1733
TP :1531833844129 43.673
TPV :1531833825521 412.6167
TC :1531833825521 0.287667
TV :1531833825521 227.1833
TP :1531833825521 43.67033

After setintervel

TPV :1531834002399 413.65
TC :1531834002399 0.279667
TV :1531834002399 227.8767
TP :1531834002399 43.671

First off, for every point you add, you are redrawing the chart 5 times. You should set `addPoint(..., false, true)` for all addPoint. Also could you post a your initial dataset1 and the json you get in the setInterval ajax function for 1 interval? — ewolden, Jul 17 '18 at 13:25
The setInterval timestamp start at the same time as the first timestamp in the inital dataset, you are basically redoing the chart from the start. I would suggest you continue from the last value. You can also avoid initialzing data, and do a check if there is 20 datapoints per series, if it is, then add with shift, if not, add without shift. — ewolden, Jul 17 '18 at 14:42
Here is an example how you could do it: https://jsfiddle.net/ewolden/9p68o2zf/ (obviously not with the ajax calls, but it should give you an idea) — ewolden, Jul 17 '18 at 14:49
We have to check `if(myChart.series[0].length == 20)` this in setinterval, it will fix the issue right? @ewolden — Jothi Kannan, Jul 17 '18 at 15:29
Actually, my bad. It should be `if(myChart.series[0].data.length == 20)`. — ewolden, Jul 17 '18 at 17:56

HighChart spline live update data with old data issue

0 Answers0