https://ecomfe.github.io/echarts-examples/public/editor.html?c=dynamic-data
Open this live chart example and go to another tab for 10 seconds. When you switch back to the
live chart tab say after 10 seconds, it will suddenly draw all the chart lines that were to come live second by second. This has some serious implications in Alarm & Events applications.
In our one application we are taking current machine time for every value received over mqtt web socket connection. For example with one second interval we receive 4,5,6,7 and attach value received time with the value, they become e.g. [4, 10s],[4, 11s],[6, 12s],[7, 13s]. I update echart options at every message received. But the problem I am facing is that if the browser tab is in background, echarts would render all these points together at once I switch back to chart tab. This is same for both time and category axis type. I don't know is this a problem with the canvas rendering or the echarts.
Echart should be rendering to canvas in real time when the values are received, and we called chartInstance.setOption() instead of flushing all values at once, if tab is hidden.
This is not a problem with ECharts. You should manage the data and understand the relationship with setInterval. By calling chart.setOption, it just updates the data you give. So just make sure you give it the right data you wish.
@Ovilia try to open this sample and switch tab and come back after 10 seconds, you will feel all the ten second values flushed at once, even the setOptions was being called every second. https://ecomfe.github.io/echarts-examples/public/editor.html?c=dynamic-data
With some more search on the topic, I think background tab throttling could be the reason for this. Read here https://developers.google.com/web/updates/2017/03/background_tabs
@ahmadalibaloch Thank you for your feedback, I will continue to follow up on this issue.