Hightcharts line graph real-time data with no interval?

Question

There are plenty of examples out there that shows how to render the chart in real-time, but they all use interval with 1 second.

The issue is, I'm getting data less than milliseconds, in fact, less than microseconds. Is there any possibility to get the real-time data without using intervals?

I can only post the code given in the example because I'm completely clueless how to do it:

Suppose this is our real-time data gotten from server:

let _data = [
  0, 0, 0, 0, 0.0000050048828125, 0.0000137939453125, 0.000049560546875, 0.00008740234375, 0.00015966796875,
  0.000262451171875, 0.0003975830078125, 0.0005687255859375, 0.0007802734375, 0.001037353515625, 0.0013468017578125,
  0.00172119140625, 0.0021756591796875, 0.0027232666015625, 0.0033880615234375, 0.004206787109375, 0.0052380371093750005,
  0.006586181640625, 0.008400146484375001, 0.010904296875, 0.0144892578125, 0.0196798095703125, 0.049684204101562504,
  0.0886883544921875, 0.11185363769531251, 0.134164306640625, 0.137352294921875, 0.1160369873046875, 0.08516308593750001,
  0.0539765625, 0.014997436523437501, -0.015882568359375, -0.0387554931640625, -0.06125732421875, -0.0745780029296875, -0.07479357910156251, -0.0725338134765625, -0.0418538818359375, 0.08582861328125001, 0.397717529296875, 0.8136408691406251,
  1.2295617980957032, 0.9944150390625001, 0.2824605712890625, -0.38949267578125, -0.597251220703125, -0.425675537109375, -0.1537947998046875, -0.0500914306640625, -0.0111041259765625, 0.0027451171875, 0.0071739501953125, 0.008443359375,
  0.0094327392578125, 0.012530517578125, 0.0176046142578125, 0.0300162353515625, 0.0433489990234375, 0.056962646484375004,
  0.0704832763671875, 0.0770511474609375, 0.0898175048828125, 0.10311853027343751, 0.117046142578125, 0.1312630615234375,
  0.1529300537109375, 0.167607177734375, 0.1899068603515625, 0.2124422607421875, 0.235044677734375, 0.2575535888671875,
  0.2724073486328125, 0.286978271484375, 0.3007579345703125, 0.3067425537109375, 0.3106370849609375, 0.303756103515625,
  0.2897236328125, 0.25916931152343753, 0.2200599365234375, 0.1728209228515625, 0.133416259765625, 0.086224853515625,
  0.05493408203125, 0.02409423828125, 0.00922607421875, -0.0043409423828125, -0.0097349853515625, -0.013127685546875, -0.01423095703125, -0.013834716796875, -0.012556030273437501, -0.010675048828125, -0.00835888671875, -0.0057305908203125, -0.0000562744140625
];

How can I ensure below to show the above data without any interval, (but ofcourse there needs to be a slow animation showing the trend - similar to the example)

Highcharts.chart('container', {
  chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
      load: function() {
        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.random();
          series.addPoint([x, y], true, true);
        }, 1000);
      }
    }
  },
  series: [{
    name: 'Real-time data',
    data: (function() {
      return _data;
    }())
  }]
});

Refresh rate of an average screen is 60 Hz. What's the point pushing data into graph every millisecond, even every 10 ms? — Dmitry, Feb 04 '18 at 17:54
I'm getting live ECG data which should be shown in a graph, where the graph will show the QRS complex of the heart. @Dmitry — , Feb 04 '18 at 17:58

score 0 · Answer 1 · answered Feb 07 '18 at 09:18

Notice that the animation and chart redraw (which in your example happens on every addPoint) need some time to happen. If they happen to quickly the chart is completely messed up because of unfinished animations: http://jsfiddle.net/BlackLabel/6thpx7rL/

  load: function() {
    var series = this.series[0];
    setInterval(function() {
      series.addPoint(Math.random(), true, true);
    }, 100);
  }

The solution here might be adding points in portions e.g. add 10 points and then redraw: http://jsfiddle.net/BlackLabel/6thpx7rL/

  load: function() {
    var series = this.series[0];
    setInterval(function() {
      for (var i = 0; i < 10; i++) {
        series.addPoint(Math.random(), false, true);
      }
      series.chart.redraw();

    }, 1000);

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

Hightcharts line graph real-time data with no interval?

1 Answers1