Draw many lines in the same chart in node-red-contrib-ui

[Miguel Angel Salinas Gancedo]

Anybody knows how draw more than one line inside the same chart of the node chart from module node-red-contrib-ui node-red???

The node help of the node said:

Plots the input values on a time based line chart.
Each input (msg.payload) value will be converted to a number. If the conversion fails, the message is ignored.
Multiple lines can be shown on the same chart by using a different msg.topic value on each input message.
The first ouput contains the chart state that can be persisted if needed. The second output sends a "restore" message that can be used to restore the state of the chart.

But I don't understand, what's the meaning of msg.topic value on each message???

Regards.

[Julian Knight]

The UI chart is fairly simplistic so far and also not very performant. You need to keep the number of points pretty low (certainly less than 50) if you don't want it running poorly.

You would likely be better off using an alternative charting library along with the UI template node.

[Dave C-J]

Well thank you Julian - let's just pretend that was answering the question as asked shall we ?... :-)

Miguel,

the msg object that is passed from node to node usually always has a .payload property - which is hopefully the interesting data. As well as that other properties can be present that can help describe the data or provide backup information... One that is used quite a lot (especially as we come from an MQTT messaging background is msg.topic - which is used to identify the data.

The graph widget can use that to identify a second trace on the same graph. If your data source doesn't already create/add a msg.topic property you can use the change node to add one manually.

[Andreas Fuchs]

Just send the data in "message.payload" and the line description as "msg.topic" some nodes allow to set the msg.topic in the ui like the inject node here in the example

[{"id":"110687a8.790a58","type":"ui_group","z":"38ab2721.58fde","name":"Default","order":"1","disp":true,"width":"6"},{"id":"88f5ae81.3d8df8","type":"ui_tab","name":"Home","icon":"dashboard","order":"1"},{"id":"ff1f5ed5.cdd408","type":"inject","z":"38ab2721.58fde","name":"","topic":"LineA","payload":"","payloadType":"date","repeat":"1","crontab":"","once":true,"x":291.76666259765625,"y":130.5500030517578,"wires":[["2e5e8c66.22854c"]]},{"id":"f7ec88fc.306a48","type":"inject","z":"38ab2721.58fde","name":"","topic":"LineB","payload":"","payloadType":"date","repeat":"2","crontab":"","once":true,"x":288.76666259765625,"y":181.5500030517578,"wires":[["2e5e8c66.22854c"]]},{"id":"a389eb05.b171d","type":"inject","z":"38ab2721.58fde","name":"","topic":"LineC","payload":"","payloadType":"date","repeat":"3","crontab":"","once":true,"x":289.76666259765625,"y":242.55001831054688,"wires":[["2e5e8c66.22854c"]]},{"id":"2e5e8c66.22854c","type":"ui_chart","z":"38ab2721.58fde","tab":"88f5ae81.3d8df8","group":"110687a8.790a58","order":1,"width":"","height":"","label":"chart","name":"","interpolate":"linear","nodata":"No Data","ymin":"","ymax":"","removeOlder":1,"removeOlderUnit":"86400","x":493.7666320800781,"y":191.60000610351562,"wires":[[],[]]}]