Tabbing away from and back into a page causes a graph updated in realtime to skip points

[qiemem]

To reproduce, go to http://lab.concord.org/examples/grapher/grapher.html#streaming

Let it run for a moment. Then, switch to another tab in your browser, wait a few seconds, and switch back. The plot will draw a straight line from the point that was drawn when you tabbed out to the point that was drawn when you tabbed back in.

Here's a screenshot. Note big straight line in the midst of the otherwise smoothly curving plot:

I've seen this behavior in both Firefox Nightly and Chrome.

[pjanik]

It seems to be related to the script that is adding new points:

d3.timer(function(elapsed) {
    time = (time + (elapsed - lastSample) / 1000);
    lastSample = elapsed;
    if (stopStreaming) { return true; }
    value1 = Math.sin(twopifreq1 * time) * amplitude1;
    value2 = Math.sin(twopifreq2 * time) * amplitude2;
    graph.addPoint([time, value1 + value2]);
    return time > maxtime * 2 || stopStreaming;
});

d3.timer uses requestAnimationFrame under the hood and RAF isn't triggered when the tab is inactive. I guess setInterval should be used here.

[scytacki]

There is a bug in Pivotal Tracker to track progress on this. https://www.pivotaltracker.com/story/show/61295602

[pjanik]

@qiemem, in general we are extracting the grapher code into a new, separate, lightweight repository: https://github.com/concord-consortium/lab-grapher.

When this process is complete, I will address this issue too.