Update Graph Values

Hello everyone,

Below is my (failed :disappointed:) attempt at creating a simple 2D line graph that should update in real time. Over time (X-axis), the line should change as the Y values change. From the examples I found, this seems simple enough, but I’m lost on how to send updated Y values into the path array. Currently, the line is generated at the beginning of the scene instead of generating slowly over time :thinking:

https://www.babylonjs-playground.com/#165IV6#3155

Thanks in advance for any help or suggestions!

On mobile so cannot update PG. Doing y += 0.5 is not going to update the multiple y values in a vector in an array. Especially as these values once set are numbers not variables. You need to update both the path array and the line per frame render. To update line use the instance parameter Create Parametric Shapes - Babylon.js Documentation

2 Likes

Hello again @JohnK,

This might be easier for me to understand if we work with a functional example from the documentation:
https://www.babylonjs-playground.com/#165IV6#64

So, the line is created from the points stored in the ā€œmyPointsā€ array. If that’s correct, I understand that part. I can see how these points are initially generated to create the line when the scene starts.

If you don’t mind, going step by step would help me understand this better. If I wanted to start with no line, then generate a straight line over time, would I start with something like this?
https://www.babylonjs-playground.com/#165IV6#3156

https://www.babylonjs-playground.com/#1EBCJY#3 Maybe helpful.
Line 57… inside the renderLoop (scene.registerBeforeRender)… we are making ANOTHER linesMesh every frame… but notice that the 5th parameter in line 57… is the name of the original linesMesh (from line 37).

Lines 53/54 move boxes (position values) a little bit each frame, then line 56 calls a ā€œupdate()ā€ function at line 40… which wipes and re-installs new path values, and then line 57… RE-DRAWS the linesMesh.

NOTE: The old path need not be ā€œwipedā€ (line 41). You can instead adjust the old values… without wiping.

Over and over… the same linesMesh being drawn… but lines 53-54… keep ā€œvaryingā€ the Z-axis of the vector3-type box positions. Then update() keeps installing those new box positions into path… and then redraw again.

Math.cos() is a sine wave generator… and we are feeding that sine wave into box 1 and 2 z-positions, and then we update (erase and rewrite) the path array, and then draw yet again… fast.

In a way, this playground is a continuously-updating line graph, yes? Continuously-updated linesMesh == success for you, right?

Study it carefully… do experiments… make changes, re-run, soon you will have success. You cannot damage that playground example… make edits, do re-runs, make fresh saves… show us URL’s to your saves… if you have questions.

I think you can turn this playground into a real-time live-updating line graph… within a few hours. :slight_smile: Good luck. (talkie, aren’t I?) :slight_smile:

4 Likes

Hello again @Wingnut,

Thanks for the new example and detailed explanations. This example is actually easier to follow than the others, and I think I can convert it into a real-time graph based on what you and @JohnK are advising :smiley: :+1:

Thanks again to you both!