Dynamic routing to widgets

Dashboard
1

I am making a dashboard for a company that has 20 identical sensors that deliver temperature, humidity and remaining battery voltage. The only thing that is different in the payloads is the sensor IDs.

Do I have to make 20 identical function nodes and widgets to handle the 20 different sensors ?
It just seems to .... wasteful...
Ideally I could make the layout of the dash by putting the gauges and charts in the flow unconnected, and then route the data to the correct widget using the sensor ID.

Doing like this image suggests for 2 sensors - for 18 more seems like it could have been done better.

more
more1158×490 38.1 KB

2

No. You can use a link-call set to dynamic mode.

However, dashboard nodes cannot be dynamically generated.

If you share the flow (not everything, jut the parts you have shown in screenshot) I will show you how.

Alternatively, if you move the function BEFORE the switch & return a payload object containing all necessary values, you can reduce the code duplication and do static routing with a switch node.

3

Are the widgets for multiple units to be shown at the same time, or do you want to see the values for one unit at a time with a way of switching between them?

4

But apparently they can with FlexDash? https://flexdash.github.io/docs/using-flexdash/array-widgets/

1 Like
5

Just looking at the screenshot of your flow - you could probably set the MQTT-In to 'Parsed JSON object' then you could remove the { } 'json' node in your flow.
mqtt_parsed

6

Wow - great - this is my flow :

[{"id":"39535495.99fe8c","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"8c430776.6c0398","type":"mqtt in","z":"39535495.99fe8c","name":"teltonika/eye1","topic":"teltonika/eye1","qos":"2","broker":"3bd853d3.79824c","x":130,"y":100,"wires":[["b4ae59d1.6e6268"]]},{"id":"b4ae59d1.6e6268","type":"json","z":"39535495.99fe8c","name":"","property":"payload","action":"","pretty":false,"x":290,"y":100,"wires":[["3f57af8d.99432"]]},{"id":"97e373db.bd4f2","type":"function","z":"39535495.99fe8c","name":"Sensor1","func":"return [\n    { \"payload\" : msg.payload.Name },\n    { \"payload\" : msg.payload.Data.temperature },\n    { \"payload\" : msg.payload.Data.humidity }\n    ];","outputs":3,"noerr":0,"x":960,"y":80,"wires":[["1bbb4263.e0f72e"],["9afb84c3.f12718","304f4b64.734ac4"],["79618ee4.090fb","bc8233e4.abfc6"]]},{"id":"9afb84c3.f12718","type":"ui_gauge","z":"39535495.99fe8c","name":"Temp","group":"c95cfde9.a1da5","order":2,"width":0,"height":0,"gtype":"gage","title":"Temp","label":"°C","format":"{{value}}","min":"15","max":"30","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1220,"y":100,"wires":[]},{"id":"1bbb4263.e0f72e","type":"ui_text","z":"39535495.99fe8c","group":"c95cfde9.a1da5","order":1,"width":0,"height":0,"name":"SensorID","label":"Sensornavn","format":"{{msg.payload}}","layout":"row-spread","x":1240,"y":60,"wires":[]},{"id":"79618ee4.090fb","type":"ui_gauge","z":"39535495.99fe8c","name":"Humidity","group":"c95cfde9.a1da5","order":4,"width":0,"height":0,"gtype":"gage","title":"Humidity","label":"%","format":"{{value}}","min":"20","max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1230,"y":200,"wires":[]},{"id":"304f4b64.734ac4","type":"ui_chart","z":"39535495.99fe8c","name":"Tchart","group":"c95cfde9.a1da5","order":3,"width":0,"height":0,"label":"Temp","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":1220,"y":140,"wires":[[],[]]},{"id":"bc8233e4.abfc6","type":"ui_chart","z":"39535495.99fe8c","name":"Hchart","group":"c95cfde9.a1da5","order":5,"width":0,"height":0,"label":"Humidy","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":1220,"y":240,"wires":[[],[]]},{"id":"3f57af8d.99432","type":"split","z":"39535495.99fe8c","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":430,"y":100,"wires":[["55aa6945.d73df8"]]},{"id":"55aa6945.d73df8","type":"switch","z":"39535495.99fe8c","name":"SensorSelect","property":"payload.Name","propertyType":"msg","rules":[{"t":"eq","v":"MP1_3433AA","vt":"str"},{"t":"eq","v":"MP1_D000AA","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":610,"y":100,"wires":[["97e373db.bd4f2"],["8b5804b0.f81fd8"],["47b27ac2.dcd8b4"]]},{"id":"8b5804b0.f81fd8","type":"function","z":"39535495.99fe8c","name":"Sensor2","func":"return [\n    { \"payload\" : msg.payload.Name },\n    { \"payload\" : msg.payload.Data.temperature },\n    { \"payload\" : msg.payload.Data.humidity }\n    ];","outputs":3,"noerr":0,"x":960,"y":380,"wires":[["fb9d1faa.b90a7"],["a59f5f99.5a96d","5ee368c1.537af8"],["c5274736.852928","fd4948cd.1d0c48"]]},{"id":"a59f5f99.5a96d","type":"ui_gauge","z":"39535495.99fe8c","name":"Temp","group":"2d7254e1.a02c9c","order":2,"width":0,"height":0,"gtype":"gage","title":"Temp","label":"°C","format":"{{value}}","min":"15","max":"30","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1220,"y":400,"wires":[]},{"id":"fb9d1faa.b90a7","type":"ui_text","z":"39535495.99fe8c","group":"2d7254e1.a02c9c","order":1,"width":0,"height":0,"name":"SensorID","label":"Sensornavn","format":"{{msg.payload}}","layout":"row-spread","x":1240,"y":360,"wires":[]},{"id":"c5274736.852928","type":"ui_gauge","z":"39535495.99fe8c","name":"Humidity","group":"2d7254e1.a02c9c","order":4,"width":0,"height":0,"gtype":"gage","title":"Humidity","label":"%","format":"{{value}}","min":"20","max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1230,"y":500,"wires":[]},{"id":"5ee368c1.537af8","type":"ui_chart","z":"39535495.99fe8c","name":"Tchart","group":"2d7254e1.a02c9c","order":3,"width":0,"height":0,"label":"Temp","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":1220,"y":440,"wires":[[],[]]},{"id":"fd4948cd.1d0c48","type":"ui_chart","z":"39535495.99fe8c","name":"Hchart","group":"2d7254e1.a02c9c","order":5,"width":0,"height":0,"label":"Humidy","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":1220,"y":540,"wires":[[],[]]},{"id":"47b27ac2.dcd8b4","type":"ui_text","z":"39535495.99fe8c","group":"ebef0641.bfc958","order":0,"width":0,"height":0,"name":"Unregistered Node","label":"ID","format":"{{msg.payload}}","layout":"row-spread","x":1120,"y":700,"wires":[]},{"id":"3bd853d3.79824c","type":"mqtt-broker","z":"","name":"AsterixQTT","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"c95cfde9.a1da5","type":"ui_group","z":"","name":"Kontor EYE1","tab":"6525b33.0907e4c","disp":true,"width":"6","collapse":false},{"id":"2d7254e1.a02c9c","type":"ui_group","z":"","name":"Kontor EYE2","tab":"6525b33.0907e4c","order":2,"disp":true,"width":"6","collapse":false},{"id":"ebef0641.bfc958","type":"ui_group","z":"","name":"Errors-unregs","tab":"6525b33.0907e4c","order":3,"disp":true,"width":"6","collapse":false},{"id":"6525b33.0907e4c","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

ADMIN EDIT - wrap flow in ``` back ticks

7

I was kind of hoping to make one group with a few widgets pr sensor in the same dash (since there are many parameters than can be measured) - like the attached ...

Capture
Capture743×909 53.3 KB

8

Thinking about this for a moment. Since you MUST define the dashboard items, the dynamic routing doesnt make sense (adds unecessary complexity) - since to add support for a new sensor requires modification to the flows.

This is my best offering...

image
image842×518 36.4 KB 

[{"id":"c21f266171b8dbac","type":"subflow","name":"sensor-splitter","info":"","category":"","in":[{"x":120,"y":80,"wires":[{"id":"97e373db.bd4f2"}]}],"out":[{"x":510,"y":40,"wires":[{"id":"97e373db.bd4f2","port":0}]},{"x":530,"y":100,"wires":[{"id":"97e373db.bd4f2","port":1}]},{"x":520,"y":160,"wires":[{"id":"97e373db.bd4f2","port":2}]},{"x":520,"y":220,"wires":[{"id":"97e373db.bd4f2","port":3}]}],"env":[{"name":"Filter","type":"str","value":"","ui":{"type":"input","opts":{"types":["str"]}}}],"meta":{},"color":"#E7E7AE","outputLabels":["name","temperature","humidity","original"],"icon":"node-red/split.svg"},{"id":"97e373db.bd4f2","type":"function","z":"c21f266171b8dbac","name":"Sensor","func":"const Filter = env.get(\"Filter\")\nconst data = msg.payload\nconst dataItem = data.find(e => e.Name === Filter)\nif (!dataItem)\n    return null //halt flow\n\nreturn [\n    { \"payload\" : dataItem.Name },\n    { \"payload\" : dataItem.Data.temperature },\n    { \"payload\" : dataItem.Data.humidity },\n    { \"payload\": dataItem },\n    \n]","outputs":4,"noerr":0,"initialize":"","finalize":"","libs":[],"x":300,"y":80,"wires":[[],[],[],[]]},{"id":"89036a4625fa7ee7","type":"subflow:c21f266171b8dbac","z":"39535495.99fe8c","name":"MP1_3433AA","env":[{"name":"Filter","value":"MP1_3433AA","type":"str"}],"x":730,"y":80,"wires":[["86f4d4d62a267a7e"],["9d1d01cb6a591964"],["1d783d57c43b430e"],["fb2b9be17b9ab091"]]},{"id":"c0fe162fb743d833","type":"subflow:c21f266171b8dbac","z":"39535495.99fe8c","name":"MP1_D000AA","env":[{"name":"Filter","value":"MP1_D000AA","type":"str"}],"x":730,"y":380,"wires":[["ff742a4eb4d98fac"],["e31d29c0222d79b4"],["839f2034cf450635"],["46ed3d712754d079"]]},{"id":"ff742a4eb4d98fac","type":"debug","z":"39535495.99fe8c","name":"Name","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1010,"y":340,"wires":[]},{"id":"e31d29c0222d79b4","type":"debug","z":"39535495.99fe8c","name":"Temp","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1010,"y":400,"wires":[]},{"id":"839f2034cf450635","type":"debug","z":"39535495.99fe8c","name":"Humidity","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1020,"y":460,"wires":[]},{"id":"46ed3d712754d079","type":"debug","z":"39535495.99fe8c","name":"everything","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1030,"y":520,"wires":[]},{"id":"86f4d4d62a267a7e","type":"debug","z":"39535495.99fe8c","name":"Name","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1010,"y":40,"wires":[]},{"id":"9d1d01cb6a591964","type":"debug","z":"39535495.99fe8c","name":"Temp","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1010,"y":100,"wires":[]},{"id":"1d783d57c43b430e","type":"debug","z":"39535495.99fe8c","name":"Humidity","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1020,"y":160,"wires":[]},{"id":"fb2b9be17b9ab091","type":"debug","z":"39535495.99fe8c","name":"everything","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1030,"y":220,"wires":[]},{"id":"d0f0d55c0391c6b8","type":"inject","z":"39535495.99fe8c","name":"simulated data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Name\":\"MP1_D000AA\",\"Data\":{\"humidity\":50.5,\"temperature\":36.2}},{\"Name\":\"MP1_3433AA\",\"Data\":{\"humidity\":56.1,\"temperature\":38.9}}]","payloadType":"json","x":420,"y":160,"wires":[["89036a4625fa7ee7","c0fe162fb743d833"]]}]

replace the INJECT for your MQTT node (and set your MQTT node to "parse JSON to Object"), remove your JSON, SWITCH and SPLIT nodes, connect the outputs of the subflow to your dashboard items.

2 Likes
10

Nice use of environment variables in the subflow instances @Steve-Mcl.
I can make use of that :wink:

3 Likes
11

Yes that is correct. T
Just take into account that Flexdash is currently in alpha status, because it is a completely new dashboard. On the other hand, @tve is a very active community member. So if you are stuck with something, he will try to fix it as soon as possible.
Bart

1 Like
12

Thank you !
This really seems to be the solution, but I can't figure out how to use it. I find no examples or docs. Do you know of some documentation or examples I can look at ?

13

Have you searched?
I've just entered flexdash in the forum search, and quickly found this -FlexDash

1 Like
14

Actually yes - but I did a general google search - I did not search inside the forum - and now feel like an idiot. Anyhoo ... thanks. This should get me started (and if not I'll whine again).. :slight_smile:

2 Likes
15

Take note of the fact that this project is still in an early phase, if you go down this route be prepared to follow the development and rework your solution as the project develops.

16

Yes, for sure.
Thanks for the advice.

17

So - I fell I am very close - managed to get the widget arrays working excellent for gauges and SparkLines. BUT - I would very much like to use the "time plot" widget (as the Sparkline does not show axis, so I can't really tell what value came in when).
I cannot get it to work - and I am guessing it is the format of the datapoints, but I couldn't find any examples. What is wrong in this flow ?

[
    {
        "id": "777070ae3efc56ba",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "48db9bc1aee18dd1",
        "type": "mqtt in",
        "z": "777070ae3efc56ba",
        "name": "",
        "topic": "teltonika/eye1",
        "qos": "2",
        "datatype": "json",
        "broker": "5e9497176afd3154",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 90,
        "y": 80,
        "wires": [
            [
                "752ec41430695f5b"
            ]
        ]
    },
    {
        "id": "752ec41430695f5b",
        "type": "split",
        "z": "777070ae3efc56ba",
        "name": "",
        "splt": "\\n",
        "spltType": "str",
        "arraySplt": 1,
        "arraySpltType": "len",
        "stream": false,
        "addname": "",
        "x": 250,
        "y": 80,
        "wires": [
            [
                "0bb197396647d901"
            ]
        ]
    },
    {
        "id": "0bb197396647d901",
        "type": "function",
        "z": "777070ae3efc56ba",
        "name": "function 1",
        "func": "return {\n    topic: msg.payload.Name,\n    title: msg.payload.Name,\n    value: Number(msg.payload.Data.temperature),\n    unit: '°C',\n    data: [msg.payload.TS, Number(msg.payload.Data.temperature)] \n};",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 80,
        "wires": [
            [
                "56857a2215dc9a8c",
                "d5a79ea5b9708c55",
                "8b9f7ec6cc934071",
                "b074847af97c4d71"
            ]
        ]
    },
    {
        "id": "56857a2215dc9a8c",
        "type": "fd-gauge",
        "z": "777070ae3efc56ba",
        "fd_container": "bdf2b4b185a1a993",
        "fd_cols": "1",
        "fd_rows": "2",
        "fd_array": true,
        "fd_array_max": 10,
        "name": "Temp",
        "title": "Gauge",
        "popup_info": "",
        "value": "30",
        "unit": "",
        "arc": 90,
        "min": 0,
        "max": 100,
        "color": "green",
        "low_color": "blue",
        "high_color": "pink",
        "low_threshold": "",
        "high_threshold": "",
        "base_color": "lightgrey",
        "needle_color": "white",
        "radius": 70,
        "stretch": "false",
        "x": 680,
        "y": 60,
        "wires": []
    },
    {
        "id": "d5a79ea5b9708c55",
        "type": "fd-spark-line",
        "z": "777070ae3efc56ba",
        "fd_container": "ef693ed7355ef704",
        "fd_cols": "4",
        "fd_rows": "4",
        "fd_array": true,
        "fd_array_max": 10,
        "name": "",
        "title": "Spark Line",
        "popup_info": "",
        "value": 0,
        "color": "blue",
        "fill_color": "",
        "text_color": "",
        "show_value": "false",
        "unit": "",
        "x": 690,
        "y": 100,
        "wires": []
    },
    {
        "id": "8b9f7ec6cc934071",
        "type": "fd-time-plot",
        "z": "777070ae3efc56ba",
        "fd_container": "ef693ed7355ef704",
        "fd_cols": "3",
        "fd_rows": "3",
        "fd_array": true,
        "fd_array_max": 10,
        "name": "",
        "title": "Time Plot",
        "popup_info": "Heyya",
        "data": "",
        "labels": [],
        "colors": [],
        "axes": [],
        "widths": [],
        "span_gaps": [],
        "left_unit": "",
        "right_unit": "",
        "left_min": "",
        "left_max": "",
        "left_decimals": 1,
        "right_min": "",
        "right_max": "",
        "right_decimals": 1,
        "reverse_legend": "false",
        "x": 690,
        "y": 140,
        "wires": [
            [
                "d7ac3ad08bdde049"
            ]
        ]
    },
    {
        "id": "d7ac3ad08bdde049",
        "type": "debug",
        "z": "777070ae3efc56ba",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 800,
        "y": 300,
        "wires": []
    },
    {
        "id": "b074847af97c4d71",
        "type": "debug",
        "z": "777070ae3efc56ba",
        "name": "debug 2",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 540,
        "y": 240,
        "wires": []
    },
    {
        "id": "5e9497176afd3154",
        "type": "mqtt-broker",
        "name": "Asterix",
        "broker": "195.159.148.50",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "3",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    },
    {
        "id": "bdf2b4b185a1a993",
        "type": "flexdash container",
        "name": "Container1",
        "kind": "StdGrid",
        "fd_children": ",56857a2215dc9a8c",
        "title": "Cont1",
        "tab": "99faa9f04adc062c",
        "min_cols": "1",
        "max_cols": "20",
        "parent": "",
        "solid": false,
        "cols": "1",
        "rows": "1"
    },
    {
        "id": "ef693ed7355ef704",
        "type": "flexdash container",
        "name": "Container2",
        "kind": "StdGrid",
        "fd_children": ",d5a79ea5b9708c55,8b9f7ec6cc934071",
        "title": "Con2Title",
        "tab": "f6f786f22db25d98",
        "min_cols": "1",
        "max_cols": "20",
        "parent": "bdf2b4b185a1a993",
        "solid": false,
        "cols": "1",
        "rows": "1"
    },
    {
        "id": "99faa9f04adc062c",
        "type": "flexdash tab",
        "name": "Hometab",
        "icon": "mdi-view-dashboard",
        "title": "Navnet",
        "fd_children": ",bdf2b4b185a1a993",
        "fd": "8d5283e8e7c331f6"
    },
    {
        "id": "f6f786f22db25d98",
        "type": "flexdash tab",
        "name": "Tab2",
        "icon": "mdi-view-dashboard",
        "title": "Tab2title",
        "fd_children": ",ef693ed7355ef704",
        "fd": "8d5283e8e7c331f6"
    }
]

Capture
Capture1515×750 44.3 KB

18

@alf,
It is very helpful that you started using Flexdash, because without testers it is very difficult to get such a project airborn...
I am going to mention @tve, because I am not sure whether he follows this discussion.

19

Hi Bart - while waiting for @tve - do you know of any example flows I could look at ? As I said I am pretty sure it is just a very simple issue with the way I format the data ....

20

I'm kind of in computer-less mode at the moment so cannot try anything... And Thorsten added the timeline widget to Flexdash only last week, so I assume he has not provided any examples yet.

When I have a quick look at his timeline code, you can see this:

TimelinePlot displays a time-line chart using uPlot. A timeline plot consists of a number of
time series, each of which is plotted as a horizontal bar whose color is determined by the
value along the X time axis.
The data must be provided in the form expected by uPlot, which is an array of equal-length arrays
of data values. The first of the arrays is the X axis, the rest are the series.
The `labels` prop is an array of strings that will be used to label the series.
`colors` is a map from discrete values (numbers or strings) to colors.
`,

So I assume the data needs to be formatted like in the uplot docs.

That is the best I can offer you at this molent unfortunately....

21

Sorry, I somehow overlooked your question post, my bad.

You are missing a labels definition for the time-plot. The info claims that if you leave it off/empty it will plot one data series, but the code doesn't actually have anything to do that, oops! I also need more warnings so one can figure out why nothing is showing up...

Bottom line, add a labels array for now into your function node, for example:

return {
    topic: msg.payload.Name,
    title: msg.payload.Name,
    value: Number(msg.payload.Data.temperature),
    unit: '°C',
    data: [msg.payload.TS, Number(msg.payload.Data.temperature)],
    labels: ['temperature'],
};
4 Likes