Normally, the ui_chart
node expects the x-axis values to be real-time dates or timestamps. In this case, we want to see 00:00:00 on the left side of the chart, with elapsed time offsets along the x-axis. Currently, this mode is not supported by the chart node.
Instead of passing each msg individually to the chart, the function node context is used to hold a growing array of relative timestamps, which is passed into the chart node every time a new msg arrives. NB: In order to show the elapsed time starting at 00:00:00 (local time), each relative timestamp must be adjusted for the current timezone's offset from UTC at the time of the epoch.
The function node's context can be reset by passing in an empty array, or can be "pre-loaded" with a saved data array. The format of the saved data array must match the sample "old data" inject node in this flow -- namely, the first data point's x-value is the absolute timestamp, and the rest of the data points are relative offsets (in millis) to that timestamp:
[[1497621600000,0],[18000000,86],[18030004,75],[18060007,92],[18090008,90]]
Finally, the array is trimmed to remove old data once it gets above a certain size (e.g. 100 points). This prevents the flow from unbounded growth, and avoids overloading the chart with points that cannot be differentiated.