Removing obsolete points from real time line chart spoils animation

[sirockin]

Description

I've created an animated real-time chart for a dashboard which could potentially stay open for a long time. To optimise memory usage, I'd like to remove points from the array which are older than the fixed time-range. However if I do this, instead of moving smoothly from right to left, the animation behaves as if data points have changed in place. (Sorry this is easier to demonstrate, see link below, than to explain :-) ).

If this is expected behaviour, please could you suggest a workaround?

Thanks!

Steps to Reproduce

1. Create a real time line graph with fixed time range
2. Progressively remove points outside the range

Expected Behavior

The line should simply move smoothly from right to left

Actual Behavior

Line redraws as if series has been recreated

Reproduction Link

https://codepen.io/sirockin/pen/gOebWVJ?editors=1111

Setting the removeExcess flag to false, stops stale points from being removed, and makes the chart revert to normal behaviour.

[DxDen1004]

I am having the exact same issue, when removing old items from the data array, the animation starts to behave in a weird way. I read an article about this behaviour when representing data in a real time line graph, but it was some time ago and I can't find it anymore.

Please let me know if you find a solution, thank you a lot.

[RalphCodesTheInternet]

Same issue here. Any solutions yet?

[lucasdclopes]

I have the same issue.

I made a (ugly) workaround. I keep a big amount of data points in memory, like 1000. When it reaches to 1000 itens I slice the data arrays keeping only the last 20 itens (thus removing 980 itens). So the redraw only occurs at that moment. Assuming a refresh interval of 2 seconds, it means that the redraws will only happen at about each half hour. There is probably a better way to handle that, but it is acceptable for my use case.