React-native-svg-charts: Line Chart for Streaming Real-time Data

[Yaweii]

First of all, thank you so much for the great job! I've been searching around and this is the best chart library. This is more of a question instead of a problem. Please feel free to share your thoughts.

What is the problem?

Trying to draw the line chart for real time data. I am building an application for vehicle data visualization. The data looks like this { speed: 55 } and the server will send me this data every 0.3 seconds.

I'm looking at this example and trying to build the line chart like this.

The data we passed is an array. However, with my case, the data isn't prepared and it is real-time data. My question is how to pass or structure this data and pass it in order to animate the line chart.

When does it happen?

What platform?

Android

React Native version: 0.55.4

Code to reproduce

// put code here
const SpeedLineChart = (props) => {

    const { vehicleStates } = props.vehicleStates;
    console.log( vehicleStates .speed)
        return (
            <View style = {{ height: 200, flexDirection: 'row'}}>
            <LineChart
                style = {{ height: 300, width: 300}}
                animated = {true}
                animationDuration = {10}
                gridMin = {0}
                gridMax = {100}
                data = { [vehicleStates.speed] }
                svg = {{ stroke: 'rgb(134, 65, 244)' }}
                contentInset = {{ top: 20, bottom: 20 }}
            >
                <Grid/>
            </LineChart>
            </View>
        )
  }

console log output:
speed: 50
speed: 51
speed: 45
speed: 53
...
### Stacktrace (if crash)

```
-->

[JesperLekland]

Hi @Yaweii and thank you for the kind words. How would you like the animation to behave? I myself visualize a line that never really reaches the right edge of the canvas (stays pretty much centered). The only way to do that right now is to pass in as many undefined values as there are data points in the data array, after the actual values.

For example:

// the chart will always evenly distribute the points across the x axis, that's why we need the undefined
data = [ 50, 51, 45, 53, undefined, undefined, undefined, undefined ]

I haven't given this much thought and there isn't any "built in" support for such animations.

[Yaweii]

@JesperLekland Thanks for the reply! I am trying to build something like this animation.

[JesperLekland]

Well that animation has a data set that is full from the beginning. If you would have that many dataPoints and switch them out for an equally long array with different points it would (should) behave very similar to the one you've linked. There's a couple of svg path tween libs that doesn't work in RN and therefore can't achieve the exact effect (I haven't found any good once so far at least).

[JesperLekland]

Oh, that link contained several animation, which one did you mean?

[Yaweii]

@JesperLekland Example this might be a better example. When new data comes in, the path will transit to the left.

[JesperLekland]

Wow, that might be a bit out of this library's reach unfortunately. I think you might be able to do it but it would probably turn into a super advanced solution (reasonable considering the pretty advanced result). I don't think I can help you without spending waaaay to much time on this. But if you happen to solve it I would love to look at the solution :) Sorry I can't help more than this

[Yaweii]

@JesperLekland Thanks! I will close this issue for now. Really appreciated your help!

[j-funk]

@Yaweii I am very interested in your results to this query! Would you be able to elaborate on what you ended up with?

[Developekolja]

I am interested in your results as well!