I want to graph some sensor data using SVG on either an Arduino with WiFi module, or a NodeMCU, thinking the method would be essentially the same, I just have not quite worked out HOW to make it appear to scroll as each new datapoint is added.
So the idea is I will be running the MCU as an access point with a small web page that displays the SVG image and refreshes every 30 seconds or a minute, something practical when a client is connected. The device will be taking measurements such as temperature, humidity and time and recording these every 10 seconds to a CSV file. I want to also put the sensor readings over time on an SVG line graph. I've already sorted out how to "Draw" the graph in the HTML portion of my code, I'm just trying to wrap my head around updating it. So as a new set of readings with a timestamp is recorded, I want to be able to add it to the right-hand side of the graph and drop the oldest value off of the left hand side of my graph so when the page refreshes, the graph appears to scroll from right to left.
I'm visualizing putting the data into a multi-dimensional array so I can select a column (same cell in each dimension of the array) to put data into and after the array is filled, I would need to shift everything left a cell and add the new data into the last cell in each row. This way I'm pointing to the same cells in the array every time the SVG graph is re-drawn, but the data in each cell is changing.
If anybody has recommendations on methods to accomplish this I would love to hear them. Code isn't necessary unless you feel it is the best way to express the explanation. I think I have this all somewhat worked out in my head but I'm not sure if I'm over thinking some simpler solution.