Mutiple line chart

Hi i have problem to make multiple line chart and i need some help

I get 3data with 1source by "mqtt in" node they are JSON format and use "split "and "switch" convert JSON to number and use this post to manange my function Multiple lines on a graph from one message? - #3 by Steve-Mcl

But i dont understand that well so i cant make mutiple line chart
Here is my flow

the chart node needs a special input -> in this case it is an object.
to get 2 lines in your line diagram you have to transfer 2 objects to the chart node at the same time.
(see example)

[{"id":"a7976e20.a59f1","type":"function","z":"48461642.eb259","name":"","func":"msg.payload = [{\n\"series\": [\"A\", \"B\", \"C\"],\n\"data\": [\n    [{ \"x\": 1504029632890, \"y\": 5 },\n     { \"x\": 1504029636001, \"y\": 4 },\n     { \"x\": 1504029638656, \"y\": 2 }\n    ],\n    [{ \"x\": 1504029633514, \"y\": 6 },\n     { \"x\": 1504029636622, \"y\": 7 },\n     { \"x\": 1504029639539, \"y\": 6 }\n    ],\n    [{ \"x\": 1504029634400, \"y\": 7 },\n     { \"x\": 1504029637959, \"y\": 7 },\n     { \"x\": 1504029640317, \"y\": 7 }\n    ]\n],\n\"labels\": [\"\"]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":260,"y":320,"wires":[["7d76732b.a947ac"]]},{"id":"1295c7f8.7e73c","type":"inject","z":"48461642.eb259","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":320,"wires":[["a7976e20.a59f1"]]},{"id":"7d76732b.a947ac","type":"ui_chart","z":"48461642.eb259","name":"","group":"c0b1b8ca.93ab38","order":2,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":450,"y":320,"wires":[[]]},{"id":"c0b1b8ca.93ab38","type":"ui_group","name":"Default","tab":"50372f16.d4f1a","order":1,"disp":false,"width":"10","collapse":false},{"id":"50372f16.d4f1a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

The dashboard has a very good documentation so please see the link aswell

if you want to create a continuous diagram, so that the diagram retains the old values, this is not easily (to my knowledge) possible. I use plotly.js to do that.
What you can do in parallel is to save the previous data set via a context or flow variable, then add the new one and transfer everything to the chart node

For live data you just need to ensure each data arrive with a different msg.topic property set - each topic will become a new series (line) on the chart - (rather than complete datasets which do require special formatting as above).

So you may already have a suitable msg.topic you can generate from the mqtt input - or you can just assign one using 3 change nodes at the end of your switch nodes just before the function node.

1 Like

cool, that was new for me as well. How can you reset the data?

sending an empty array []

ahh damn, thank you. I was trying to reset with a msg.payload = []; but my grid was defined as msg1 so of course it cannot work. now I changed it to msg1 = [] and it works

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.