Show data as a live stream, Highcharts

Question

So What I have is a set of data stored, which I am able to access in Highchart easily. but Now what I need is to show the data as a live stream like the following example :

https://www.highcharts.com/demo/dynamic-update

What I have done so far is Here :

<script type="text/javascript">

var xValues = [];
 xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {


        crosshair: false
    },
    yAxis: {


        title: {
            text: 'Peaks'

        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: xValues,
         animation: {
                duration: 5000
            }

    }]
});


</script>.

How can my data flow like the above example? in 10 10 patches. Here is the Working JSFiddle:

https://jsfiddle.net/abnitchauhan/3vj2afnt/

Answer 1

You can initially add only the first 10 points and then use chart load event function and set interval to add remaining points with shift argument:

var xValues = [],
    counter = 11,
    startValues;

xValues = [...];

startValues = xValues.slice(0, counter);

var chart = Highcharts.chart('ppg', {
    chart: {
        type: 'line',
        events: {
            load: function() {
                var chart = this,
                    interval = setInterval(function() {
                        chart.series[0].addPoint(xValues[counter], true, true);
                        counter++;

                        if (counter === xValues.length - 1) {
                            clearInterval(interval);
                        }
                    }, 1000);
            }
        }
    },
    ...
});

---

Live demo: https://jsfiddle.net/BlackLabel/7x9vrLqm/

API Reference:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Answer 2

In your code event is missing which will trigger change per sec.

Something like this. I have used random number.

var xValues = [];
 xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];


Highcharts.chart('ppg', {
    chart: {
        type: 'line',
         events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = Math.random();
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {


        crosshair: false
    },
    yAxis: {

        title: {
            text: 'Peaks'
        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: xValues,
         animation: {
                duration: 5000
            }
    }]
});

Working fiddle