# Dynamic routing to widgets

**URL:** <https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416>\
**Category:** Dashboard\
**Created:** [14 August 2022 09:25 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416 "2022-08-14T09:25:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [14 August 2022 09:25 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/1 "2022-08-14T09:25:26Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e8b2b69dae55cc78774463d3422e90b81a76d2df.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 August 2022 09:27 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/2 "2022-08-14T09:27:32Z")

</div>

> [@alf](#):
>
> Do I have to make 20 identical function nodes

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.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [14 August 2022 09:38 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/3 "2022-08-14T09:38:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [14 August 2022 09:43 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/4 "2022-08-14T09:43:13Z")

</div>

> [@Steve-Mcl](#):
>
> However, dashboard nodes cannot be dynamically generated.

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

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [14 August 2022 09:49 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/5 "2022-08-14T09:49:19Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/aea6193a01ba3c76dcbb8ae9554c221345722057.png)

---

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [14 August 2022 10:05 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/6 "2022-08-14T10:05:38Z")

</div>

Wow - great - this is my flow :

```auto
[{"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_

---

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [14 August 2022 10:07 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/7 "2022-08-14T10:07:51Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/f/ff16dac7ce6a1f212e038e57831fb2a820e692a0.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 August 2022 10:37 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/8 "2022-08-14T10:37:39Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a1f4c4240f8f19f5aaa6a377ded6b1ef29dbf26c.png)

```auto
[{"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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 August 2022 18:27 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/10 "2022-08-14T18:27:08Z")

</div>

> [@Steve-Mcl](#):
>
> This is my best offering...

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [15 August 2022 05:43 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/11 "2022-08-15T05:43:13Z")

</div>

> [@jbudd](#):
>
> But apparently they can with FlexDash?

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

---

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [15 August 2022 21:02 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/12 "2022-08-15T21:02:19Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [15 August 2022 21:32 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/13 "2022-08-15T21:32:22Z")

</div>

> [@alf](#):
>
> I find no examples or docs

Have you searched?  
I've just entered flexdash in the forum search, and quickly found this -[FlexDash](https://flexdash.github.io/docs/)

---

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [16 August 2022 06:13 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/14 "2022-08-16T06:13:57Z")

</div>

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).. 🙂

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 August 2022 06:18 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/15 "2022-08-16T06:18:51Z")

</div>

> [@alf](#):
>
> This really seems to be the solution

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.

---

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [16 August 2022 18:37 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/16 "2022-08-16T18:37:12Z")

</div>

Yes, for sure.  
Thanks for the advice.

---

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [16 August 2022 18:51 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/17 "2022-08-16T18:51:04Z")

</div>

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 ?

```auto
[
    {
        "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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a242f91f3e87c9d74960c30913388b25102e6102.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [16 August 2022 19:12 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/18 "2022-08-16T19:12:39Z")

</div>

> [@alf](#):
>
> 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

@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.

---

<div class="post-metadata">

**Author:** ![alf](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alf/32/18315_2.png) [@alf](https://discourse.nodered.org/u/alf)\
**Post date:** [18 August 2022 10:20 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/19 "2022-08-18T10:20:59Z")

</div>

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 ....

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [18 August 2022 11:15 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/20 "2022-08-18T11:15:40Z")

</div>

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](https://github.com/flexdash/flexdash/blob/main/src/widgets/timeline-plot.vue#L46), 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](https://github.com/vasturiano/timelines-chart#data-syntax).

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

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [18 August 2022 15:57 UTC](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416/21 "2022-08-18T15:57:26Z")

</div>

> [@alf](#):
>
> while waiting for @tve

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:

```auto
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'],
};

```

[Next page](https://discourse.nodered.org/t/dynamic-routing-to-widgets/66416.md?page=2)