MQTT to node-red-node-ui-vega - Any working examples available?

General
1

Hi,

I am just getting started with a Node-RED implementation and can see how flexible and powerful the system is. I have already configured several flows (MQTT Inputs) to switch and then display using various formats on a dashboard.

One thing I would like to do is to be able to create a stacked, area graph - to show total household electrical energy consumption from a number of sources (PV, Grid, Battery). The stock chart plugin appears to be able to create multi line graphs, however, stacked area graphs appear to be beyond the capabilities. Reading around there are suggestions that 'node-red-node-ui-vega' would be the best way to proceed - providing much more powerful charting functions.

I can see how the actual 'chart' descriptions/definitions appear to work within Vega, however, am struggling on how to get the mqtt topic & payload data into the charts in order to provide dynamic charting on the dashboard?

If anyone has a simple example showing mqtt message flow into a Vega chart it would be appreciated.

Many thanks,

Andrew

2

take the output of the MQTt-node and feed it into a change node and move the peice of data you need to the appropriate msg value and send it to the graph.

You just have to format it properly. Here is an inject sending data to the bar graph

[{"id":"19c88e59.58e7c2","type":"ui_vega","z":"6f568ed8.fc667","group":"754700da.8cddf","name":"Bar Chart","order":1,"width":"10","height":"6","vega":"","x":420,"y":180,"wires":[]},{"id":"f198e578a3023130","type":"inject","z":"6f568ed8.fc667","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\t   \"width\": 400,\t   \"height\": 200,\t   \"data\": {\t       \"values\": [\t           {\"city\": \"Tokyo\", \"population\": 37435191},\t           {\t               \"city\": \"San Fransisco\",\t               \"population\": 897536\t           },\t           {\t               \"city\": \"New York\",\t               \"population\": 8601186\t           },\t           {\"city\": \"London\", \"population\": 9176530},\t           {\"city\": \"Paris\", \"population\": 10958187},\t           {\"city\": \"Berlin\", \"population\": 3556792},\t           {\"city\": \"Delhi\", \"population\": 29399141},\t           {\t               \"city\": \"Beijing\",\t               \"population\": 20035455\t           }     \t       ]   \t   },\t   \"mark\" : \"bar\",\t   \"encoding\": {\t       \"x\": {\t           \"field\": \"city\",\t           \"type\": \"nominal\"     \t       },\t       \"y\": {\t           \"field\": \"population\",\t           \"type\": \"quantitative\"     \t       }   \t   } \t}","payloadType":"jsonata","x":250,"y":180,"wires":[["19c88e59.58e7c2"]]},{"id":"754700da.8cddf","type":"ui_group","name":"Group 1","tab":"5e69b28.294dd4c","order":1,"disp":false,"width":"10","collapse":false},{"id":"5e69b28.294dd4c","type":"ui_tab","name":"[Vega-Lite] Simple Bar Chart","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

Check the Help tab for links on the format/gramma of the data

3

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