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; }()) }] }); 

Answer 1

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 eg 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