[Feature] Option to peridiodically refresh

[bartbutenaers]

What problem does this feature solve?

Dear,
It seems weird to me if this feature wouldn't exist already, but cannot find anything unfortunately. Perhaps I am just searching for the wrong keywords. Apologies in that case already...

I am continiously appending new datapoints to my chart using chart.appendData. However calling each time the chart.resize() (to show the new appended datapoint) is too resource extensive. So I tried a simple workaround to refresh the chart only every 500 msecs, however the updating looks very ugly, as you can see in this codepen. I have no idea what I am doing wrong... When you set the refreshInterval to value 0 in this codepen, then the chart is refreshed for every datapoint and then it looks better.

What does the proposed API look like?

Perhaps add a parameter like refreshInterval (in msecs) or refreshCount (as a counter of new datapoints added) could be provided.

[helgasoft]

A continuation of your previous question #20734, better to reopen than post a new one.
New code also answers the question what is preferable - refresh or setOption. Answer is: refresh is faster.

I have no idea what I am doing wrong... When you set the refreshInterval to value 0 in this codepen, then the chart is refreshed for every datapoint and then it looks better.

It seems refreshInterval is redundant. Code works OK without it - Demo.
I don't see a need for a new feature since setInterval does the job already.
📌 please close issue if problem solved.

[bartbutenaers]

Hi @helgasoft,
Thanks for assisting me (again)!
I was not sure whether you preferred to keep both questions separate. I will keep that in mind next time...

Yes you are absolutely correct: the appendData combined with refresh is much faster in this use case (compared to setOption). It works very smooth that way.

And yes indeed your demo code works fine by refreshing everytime a new datapoint is appended to the chart. But imho it is a large overhead (from a performance point of view) to refresh the chart every 10 msecs (when a new datapoint arrives). This becomes even more important when the number of datapoints in the chart or the rate of appending datapoints increases further. It seems to be very inefficient to me to refresh the chart more often as your eye can see. I hope you understand my concern...

Therefore I tried to reduce the number of refreshes e.g. once every 500 milliseconds (i.e. when 50 datapoints have been appended). I had expected to see every 500 milliseconds the latest 50 new datapoints to be appended to the chart, but for some reason the chart keeps flickering. I also noticed that you have used animation: false in your demo, but when I try to add that to my demo code the flickering isn't solved...

I agree with you that adding a new feature for this might be complete overhead. But it would be nice if we could refresh the chart at lower rates. If you would have any tips I could try to do this properly, that would be very much appreciated!

[helgasoft]

reduce the number of refreshes e.g. once every 500 milliseconds (i.e. when 50 datapoints have been appended).

This is possible, but there may be a bug for type='line'. Type 'scatter' works as expected though - Demo.
See also my Demo in related #18742, it does not use appendData and looks smooth.

[Justin-ZS]

You may consider collecting new data and appending it only once within your preferred interval.
Just like this demo.

[bartbutenaers]

Type 'scatter' works as expected though

Nice catch!! I even hadn't thought myself about comparing performance to the scatter chart.

Could you then please add the label "bug" to this issue then, so hopefully somebody ever finds some time to have a look a it? It would be a really nice improvement for our (open-source Node-RED) dashboard, because this is a typical use case for our users. Thanks!!

See also my Demo in related #18742,

Yes you correct, that looks very smooth. And you even use setOption instead of appendData, which kind of surprises me that this works so well: because in my tests the setOption was horrible slow compared to appendData. I thought it was because Echarts then need to calculate the delta itself, so it has to compare all the datapoints to figure out at the end that only a single datapoint has been appended. But perhaps I am completely misunderstanding the entire concept then...

You may consider collecting new data and appending it only once within your preferred interval. Just like this demo.

@Justin-ZS
Thanks for joining here!
Aah, why didn't think about that myself...
Yes your demo contains a decent workaround. That way our application is in control of when the re-rendering needs to happen.
Nice one! I am certainly going to use this as a workaround.
Although it would be still nice if some day somebody could fix the original refresh issue...