Realtime Endless Line Chart (react native skia, reanimated)

134 views Asked by At

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:

  1. memory-friendly solution to save points of last 10s (garbage collect others)
  2. when drawing, make it efficient

I use react native, reanimated and skia

Current solution:

  1. 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.
  2. 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?

0

There are 0 answers