The easiset way to collect and show data on chart

Hi, reading around (many post) I can't find a way to draw a chart from a sensor's readings, maybe there is already a node able to do that?
Let's think I'm reading from a sensor it every second, I'm not going to store data to a database, and I don't have one, simply writing to a file may be enough. I need something that stores time too and pass all in chart. I suppose this is a common task, so maybe there is something ready too. Thank you a lot for suggestions

The dashboad chart node does that. It will take a reading input in msg.payload. it will plot the chart and output the chart data, you can limit the output data points in the chart node. You could then either store to context or file.
here is an exampl, I have limited to 10 points just for testing.

hope it helps

[{"id":"79bcdaf.38480a4","type":"inject","z":"57675e72.26a0d8","name":"simulate sensor readings ","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$round($random()*10)","payloadType":"jsonata","x":160,"y":4520,"wires":[["7f06ab4c.45bad4"]]},{"id":"7f06ab4c.45bad4","type":"ui_chart","z":"57675e72.26a0d8","name":"","group":"8b5cde76.edd58","order":9,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"10","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#5fad47","#d73920","#ff7f0e","#5b2067","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":410,"y":4520,"wires":[["91abdb40.bfc1a8"]]},{"id":"375bf87f.ed4af8","type":"inject","z":"57675e72.26a0d8","name":"reload data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"chart_data","payloadType":"flow","x":100,"y":4640,"wires":[["7f06ab4c.45bad4"]]},{"id":"547c9934.810aa","type":"inject","z":"57675e72.26a0d8","name":"clear chart","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":120,"y":4580,"wires":[["7f06ab4c.45bad4"]]},{"id":"91abdb40.bfc1a8","type":"switch","z":"57675e72.26a0d8","name":"Only store non empty ararry","property":"payload","propertyType":"msg","rules":[{"t":"nempty"}],"checkall":"true","repair":false,"outputs":1,"x":440,"y":4560,"wires":[["7bc67d3c.e52e84"]]},{"id":"7bc67d3c.e52e84","type":"change","z":"57675e72.26a0d8","name":"store data","rules":[{"t":"set","p":"chart_data","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":690,"y":4560,"wires":[["d9dfd52b.f330c8"]]},{"id":"d9dfd52b.f330c8","type":"debug","z":"57675e72.26a0d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":4520,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

thanks for answer, yes I know it works like that, but I mean if there is a node which easly stores data into a file, format it and pass it to chart for the visualization, for example:
every time I push a new value (payload:data, time:currenttime), it stores it to a desidered file and display the last 100 data on chart, As I suppose this is a frequent issue, I thought about something already ready.
Thanks

The output of the chart node is the current data array so you can save that in a file if you wish and read it back in when a client connect (using the ui-control node to detect the connection and trigger the file read

1 Like

You can just store the output from the chart as i said to file also, you can limit it to last 100 entries in a change node.

[{"id":"6b7676b.6ab0788","type":"inject","z":"c74669a0.6a34f8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$round($random()*10)","payloadType":"jsonata","x":200,"y":3200,"wires":[["82853f5.83f174"]]},{"id":"82853f5.83f174","type":"ui_chart","z":"c74669a0.6a34f8","name":"","group":"8b5cde76.edd58","order":9,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"10","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#5fad47","#d73920","#ff7f0e","#5b2067","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":330,"y":3200,"wires":[["f2bf26ae.70609"]]},{"id":"f2bf26ae.70609","type":"change","z":"c74669a0.6a34f8","name":"store data","rules":[{"t":"set","p":"payload[0].data[0]","pt":"msg","to":"payload[0].data[0][[-100..-1]]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":3200,"wires":[["c91b3f18.f054a8"]]},{"id":"c91b3f18.f054a8","type":"file","z":"c74669a0.6a34f8","name":"","filename":"chart100.json","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"none","x":650,"y":3200,"wires":[["5dbcd83c.5ab53"]]},{"id":"5dbcd83c.5ab53","type":"debug","z":"c74669a0.6a34f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":670,"y":3300,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

you will need to set the file you wish to save to in the file node.

To read the file back in use a file in node and then pass it through a json node.

1 Like

thank you, I'll give a try soon :slight_smile: