Example: Graphing Data Using the Graph Widget

Download Example created in 4.797

This example demonstrates how to display List data in a graphical format using the graph widget and modify each data point independently.
In this example the X-axis is fixed to represent time in seconds but can be modified to be configurable as well by replacing the tick mark text with a text gauge bound to the list.
Any time a data point is modified the entire graph must be redrawn by simple running the List pointer from the top of the list to the end, this will redraw the graph.
After data is modified the list must be saved to non-volatile memory.

What is notable about the graph widget is it will draw the sequence only up to the row the list pointer is currently set to. To overcome this each time a variable is updated the graph is redrawn by running the pointer from start to end of list.
The graph also draws opposite of how we want to represent the data so it must be set to "mirror" in the widget properties. This places the Y-axis on the right side which does not look good so it must be set to "transparent" in the properties then a new axis drawn on the left side using a rectangle widget set to a width of 2 -4 pixels.

To use this example select the initialize button to load the list with 20 rows of default data. If this is not done the list will be empty and have 0 rows.
Select the variable to modify then inc/dec the value. Once complete save the graph data and it will be saved through a power cycle.