I’m attempting to create a line graph for my project that updates every second. As you can see in the PG below, the line is recreated every frame with new points. However, I haven’t been able to figure out how to only add one new point every second. X values should be time (seconds), and Y values will vary.
for just a straight line you could try scaling. note also that MeshBuilder creates a new Mesh every time, so you need to clean up after with dispose. If you make a mesh updatable then you could update it without needing to do that housekeeping by modifying the VerticesData - that would have better performance.
Thanks for the PG example and the explanations, I really appreciate it!
My project is a simulation, so the graph will be running for hours or even days at a time. Every second will add a new point from the data set (X = seconds, Y = simulation data values), so the line would have 86,400 points after 24 hours. Is this even possible, or should I abandon the idea?
I’ve seen many examples of real-time graphs like this using only javascript, but I’m not sure if it will work with the way babylon.js creates lines.
I’ve been running a new line generator with one point being added every second for about an hour (3600 total points!), and the scene is still at 60 FPS.
The new issue is scaling the line so that it stays within the boundaries of the screen. Ideally it, would work like a GUI button, but instead of text, the line is displayed. The line would auto-scale to stay within a rectangle that is in a fixed position on the screen.
You would need to adapt the camera distance based off the new bounding box of your line to ensure it all fits on screen as we are doing in the camera framing behavior if you want some code to look into.
I have done time series data for various companies over the last few years: IoT telemetry, error budget calculations, sports betting odds history, etc. In none of those cases did anybody want to see every point on a graph - the granularity would continuously decrease as the duration was extended. We would typically show values outside of thresholds, percentile min/max, averaging, etc. So, that would depend entirely on your domain that you are building for. In typical time series databases actually even the high granularity is lost. That is one way to be able to show time series data spanning even months. I also used d3 on my last 2 projects, but I was only showing 2d data in a chart format. Typically I would work backwards from how to turn the data into useful information - loading a long range of data with a point for every second will take ages.
I agree, creating a line graph like this doesn’t seem like the right approach due to the sheer amount of data processing involved. It’s amazing that the scene can even generate a line with 3600 points so quickly! The goal is to let the simulation run for hours or days, then use the graph to visualize the trends. Users could scroll through the entire timeline to see how the values change over the course of the simulation.
Programs that have graphs like this must obviously use code that combines data points and creates simplified continuous lines. I have very little programming experience, so I won’t be figuring out how to do this anytime soon There’s the whole other challenge of only showing a portion of the line (say an hour of time), and being able to scroll through the timeline. I haven’t seen anything like this created in babylon.js yet, but I’m sure it would be useful for many types of projects.
Thanks again for your help, and thanks also to @sebavan for the recommendation in your post.
There’s the whole other challenge of only showing a portion of the line (say an hour of time), and being able to scroll through the timeline. I haven’t seen anything like this created in babylon.js yet, but I’m sure it would be useful for many types of projects.