I want a line chart with the following axes: x: Time y: A value
The time axis is only about 10 seconds, I want it to animate the value live to observe the value.
Problems to solve:
- memory-friendly solution to save points of last 10s (garbage collect others)
- when drawing, make it efficient
I use react native, reanimated and skia
Current solution:
- currently I have created a simple circular buffer that can store 1000 points. {x, y, timestamp}. So maximum 1000 points of the last 10 seconds can be displayed, if there are more the oldest ones are deleted although they are in the 10seconds. This solution is okey.
- i don't want to recalculate "x" every time from all points per frame, because that is quite memory intensive. Is there any other solution?
My ideas:
- I cut all points in half and draw them on 2 Views then use translateY
- Draw it on 1 View, and Cut it somehow in half (is this possible with react native skia?)
Any other ideas?