Plot graph points as a live stream : Highcharts

Question

So What I have is a graph which updates particular points as once. But the problem is that the graph is not being plotted as a live stream. it just plots points at once

Here is the Code:

var chart;

function requestData() {
    $.ajax({
        url: 'https://api.myjson.com/bins/wmxsn',
        success: function(data) {
            var series = chart.series[0],
                shift = series.data.length > 20, // shift if the series is 
                y = data;

            data.forEach(function(el) {
                chart.series[0].addPoint(el, false, shift);
            });

            chart.redraw();

            setTimeout(requestData, 1000);
        },
        cache: false
    });
}

document.addEventListener('DOMContentLoaded', function() {
    chart = Highcharts.chart('container', {
        chart: {
            type: 'line',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            crosshair: false
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });
});

Here's the Fiddle Example of how data points are plotting.

http://jsfiddle.net/abnitchauhan/g86tbydj/

But what I want is the flow to be smooth as like the following example: (It's just an example of how the data should flow irrespective of the code. Please only see the graph animation in the following code)

https://codepen.io/AbnitChauhan/pen/BaBxyMV

Please see the link for more information on animating the graph api.highcharts.com/highcharts/plotOptions.series.animation — chintuyadavsara
I tried the link above. Not able to find the exact solution. @chintuyadavsara — Chempooro

Wojciech Chmiel Wojciech Chmiel · Accepted Answer · 2019-09-11T07:50:16

The problem is that you are fetching data, add points and redraw the chart when all points are added. To make it "live" and smooth add points separately in the equal interval. If the interval is very small disable the animation which makes it work better (chart.animation = false). Check demos posted below.

Example code:

function requestData() {
  $.ajax({
    url: 'https://api.myjson.com/bins/wmxsn',
    success: function(data) {
      var series = chart.series[0],
        shift = series.data.length > 200, // shift if the series is 
        y = data,
        i = 0;

      var interval = setInterval(function () {
        if (i < 10) {
            chart.series[0].addPoint(data[i] * Math.random() * 10, true, shift);
          i++
        } else {
            clearInterval(interval);
          requestData();
        }
      }, 30);
    },
    cache: false
  });
}

Demo:

API reference:

https://api.highcharts.com/highcharts/chart.animation

Plot graph points as a live stream : Highcharts

1 Answers