Real time (dynamic) chart running issues on Chrome / Edge but not in Firefox

[luciotappi]

Hello to everyone. I’m new in the forum and this is my first question. Forgive me if i make a mistake while asking.
I’ve working on an website using canvasJS. I’m showing a real time chart of two variables vs time axis. The variables are sampled and updated every second. I’m using Visual Studio Code with Live Server extension to use my computer as server and run the website on browsers ( port 5500).

The problem i am facing is when the website is running and the window is ‘active’ ( is not minimized and i am not doing something else with the computer) it works fine and i can see the two variables uptading every second on the plot. But if i minimize the browser (website still running) and start doing something else, and then open the window to check the variables, I notice that in the time the website is not ‘active’ it ‘misses’ some dataPoints. Looking at the console it seems that the sample time slows down and takes the dataPoints every 5 seconds, then every 12 seconds, and keeps getting bigger.

Here is the fiddle with the code:

https://jsfiddle.net/luciotappi/pbhowca6/

I’ve experienced this in Chrome and Edge, but in Firefox i didn’t have any problems. I believe the problem is with some kind of browser settings. Does anybody had an issue like this? Any suggestions of how can i fix this?

Chrome version : Versión 91.0.4472.114 (Build oficial) (64 bits)
Edge version: Versión 91.0.864.54 (Compilación oficial) (64 bits)
Firefox version : 89.0.2 (64-bit)

Thank you very much.

Lucio.

[Adithya Menon]

@luciotappi,

In Chromium-based browsers, there have been various restrictions on background tabs to mitigate the dramatic negative effect on browser performance. In case of chrome, since chrome version 57 a budget-based timer throttling was introduced placing an additional limit on background timer CPU usage.

Please refer to the Google blog post for more info.

—
Adithya Menon
Team CanvasJS