2

I've been checking out the plotly js lib to use for real-time graphing. I found this codepen which helped me get a simple example going:

var plotDiv = document.getElementById('plotDiv');

var data = [{
    x: [ new Date().getTime() / 1000 ],
    y: [0]
}];

Plotly.plot(plotDiv, data, { title: 'Random Over Time'});

setInterval(function(){
    var update = {
        x: [[ new Date().getTime() / 1000 ]],
        y: [[ Math.random() ]]
    };

    Plotly.extendTraces(plotDiv, update, [0], 20);
}, 100);

http://codepen.io/plotly/pen/LGEyyY?editors=001

It works great - except that it seems plotly downsamples (or something) when you tab away from the codepen window. It is quite easy to reproduce: Change the number of points in the graph to e.g. 20 (last param of extendTraces function) and change the timeout to 100 ms. Let the graph fill with points and switch to another tab for 5 sec or so. When you go back, it is clear that points disappear much faster for some time due to the downsampling. I've also done some tests with a sine wave which shows it more clearly.

My question is - is there anyway to change or get rid of this behavior ? With data comming at 1 sec intervals it would great if you could use maxpoints=60 to show the last minute of data.

Maximilian Peters
  • 30,348
  • 12
  • 86
  • 99
user2510141
  • 374
  • 3
  • 12

1 Answers1

1

Upon further investigation it seems that Chrome is not calling the interval function with 100 ms interval when tab is not visible. Discussed in more detail here: Chrome: timeouts/interval suspended in background tabs?

Community
  • 1
  • 1
user2510141
  • 374
  • 3
  • 12