Which is the recommended min.delay to dynamically add points to a line chart ?
In our test-case an embedded device is publishing mqtt messages which are visualized in a line chart on a node-red dashboard. When the device publishes faster than each 500 milliseconds (for instance each 250 msec or even faster), a time lag can be observed in the line chart representation of the mqtt data subscribed by node-red. In this case it can be observed that after the embedded device stops publishing, it takes several seconds until all the previously published data are also added into the line chart. Is there anything that can be done on the node-red side to improve the performance of the line chart ? I assume that this is a line chart issue, as it does not occur when using for instance gauge widgets to display the mqtt data (it is clear of course that a gauge stores only one value, the actual one, and not a list of values as a line chart)
The bottleneck is number of points the chart has to calculate and render. For every new incoming data all the points "move" and amount of job needed to be done increases. Second thing is reasonable amount of data points to present. You cant actually fit two points into one pixel. Chart becomes unreadable and loses its meaning. Well you can do wider chart but your display will limit there at some point anyway.
There is no actual number to say to you, it depends on many things, but feeding with 250ms is really fast. Can this kind of fast changing chart do it's main thing - be the statistical reference of your process?
Even if it does, you'll need to reduce maximum number of points the chart needs to be handle at once.
Read this topic also, there is testing flow. You can test your equipment and find the optimal number for your actual setup. https://discourse.nodered.org/t/very-slow-dashboard-dark-at-reload/3456
Would be eventually better to write a function that "caches" the mqtt data as a kind of ring-buffer (for instance the last 100 or 1000 values from the embedded device) and override the complete line chart each time when new data arrives ?
This is one of many many options of course. You'll get rid of excessive rendering calls.
Approximately how wide is your chart and what time range have you specified it should display over?
The sample rate for the chart should be something between 100 and 250 msec. We would like to display like the last 30-40 seconds (so the chart could contain about 300-400 points).
What would be the best way to integrate in a node-red flow some custom javascript functions that handle a ring buffer ?
The instance of the ring-buffer will be stored in the node context handling the reception of the data that will be visualized in the chart..
For something like this I would not attempt to use the node-red chart, I suggest you could be better looking at influxdb for the data storage and grafana for the charts. They are both designed for high performance operating with real time data.
@Colin
Thank you for the information. Where can be found some good samples about using grafana charts (with or without influxdb) with the node-red dashboard?
Is it possible to use also another data-source for the grafana chart, for instance my custom ring-buffer (still have the open question about how to integrate such a functionality into node-red)?
I think that influxdb is maybe an overkill for my application. Does influxdb run also on windows? Is it free also for commercial projects?
It is not intensive on resources, I run it on a RPi though at nothing like the data rate you want. On the other hand if you only ever want current data and don't want any historical then you could be right. However it does have built in mechanisms for automatically deleting data after a certain time. The actual implementation of influx with node-red is trivial, and influx is highly integrated with grafana also, so once you get over the learning curve of setting up influx it is very easy.
I don't know about use with commercial projects and I don't use Windows.
Searching the flows site yields node-red-contrib-buffer-array (node) - Node-RED which may be what you want.
Thanks again. Yes, actually I am looking for a chart to visualize current (realtime) data.
Is there any other possibility to integrate javascript code than generating and installing a node-red package ?
I would like to test another implementation of a ring-buffer.
You can code it up in a function node.
