# How do extract specific topic from payload.msg and display in a dial on the DASHBOARD

**URL:** <https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node\
**Created:** [21 February 2023 11:40 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509 "2023-02-21T11:40:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![fritserasmus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fritserasmus/32/274_2.png) [@fritserasmus](https://discourse.nodered.org/u/fritserasmus)\
**Post date:** [21 February 2023 11:40 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/1 "2023-02-21T11:40:05Z")

</div>

I have a feed as follows:-

```auto
solarmd/energy/outputEnergy/bank1 : msg.payload : Object
object
sniu: false
serialNumber: null
deviceID: null
lastUpdate: 1676979049723
voltageV: 54.425
currentA: 1.836
powerW: 99.88758
capacityP: 99.98902469135803
capacityAh: 143.98419555555554
ratedCapacityAh: 144
ratedVoltageV: 51.2
ratedChargeCurrentC: 0.6940000000000001
ratedDischargeCurrentC: 0.6940000000000001
storageName: "bank1"
remainingTimeSign: 0
dcConnected: true
available: true
dcConnectedDevice: 1

```

I am able to show the value of only the " **msg.payload.capacityP**" in the debug window.

The issue I have is I am unable to use that value in say the "gauge" on the "Dashboard"

the msg.payload

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/14a75895c06dabb646fb851161b6ecaa3f0a8ec8.png)

The gauge properties:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af0845aecb1071a4620fbc1add7e93ebace58a54.png)

Useless gauge...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/029e5f7bd3c69dbafea2d370dc5a5f82c30f1ac6.png)

Where the payload only had one topic it was rather easy for me to set-up.  
Multiple topics and I cannot do it.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91db2b05b0e8bb149a81011cc7f6a3ebd96c723b.png)

Anyone that can help me please?

---

<div class="post-metadata">

**Author:** ![jw\_te\_r](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jw_te_r/32/69700_2.png) [@jw\_te\_r](https://discourse.nodered.org/u/jw_te_r)\
**Post date:** [21 February 2023 11:49 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/2 "2023-02-21T11:49:26Z")

</div>

It looks like capacityP is a string. The gauge node needs a number.

---

<div class="post-metadata">

**Author:** ![fritserasmus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fritserasmus/32/274_2.png) [@fritserasmus](https://discourse.nodered.org/u/fritserasmus)\
**Post date:** [21 February 2023 11:52 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/3 "2023-02-21T11:52:16Z")

</div>

Thanks for the pointer.  
How do I convert it so I can test it?

I suppose I will have to put a node before the gauge display node to do the conversion.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 February 2023 11:57 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/4 "2023-02-21T11:57:25Z")

</div>

@jw_te_r The gauge node will accept a string as long as it parses to a number

You can set the gauge value format field to `{{msg.payload.capacityP | number : 2}}` which will round the values to 2 decimal places also. [Angularjs filter](https://docs.angularjs.org/api/ng/filter/number)

---

<div class="post-metadata">

**Author:** ![fritserasmus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fritserasmus/32/274_2.png) [@fritserasmus](https://discourse.nodered.org/u/fritserasmus)\
**Post date:** [21 February 2023 12:29 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/5 "2023-02-21T12:29:45Z")

</div>

> [@E1cid](#):
>
> {{msg.payload.capacityP | number : 2}}

🕺

Thanks @E1cid

Problem SOLVED!!

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b957a9e47216ed49cc5e2d6a24fb05979b056b76.png)

---

<div class="post-metadata">

**Author:** ![fritserasmus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fritserasmus/32/274_2.png) [@fritserasmus](https://discourse.nodered.org/u/fritserasmus)\
**Post date:** [22 February 2023 08:41 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/6 "2023-02-22T08:41:24Z")

</div>

Sorry to bother you again.

I have added a "Gauge" to indicate Battery charge / Battery discharge  
To check my number I added a text node above the gauge (Will remove at a later stage)

This is what I see:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/79b7eb0a29964a8ac9adad3417138baa3341bb3a.png)

And this is my gauge node properties

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/42417a1e088b4401ef92d5cbae95b2d6a2bacc39.png)

Just got a discharge as well  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/97aaacd5deeab1849bb616326df445552711f44b.png)

When the battery charges I would like it to show green and to the plus side.  
When the battery discharges I would like the gauge to show red on the negative side  
I was considering using a BAR with positive and negative Max and Min.

The issue here is where do I enter the Value Format Code you sent earlier

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a63baec14e15771d99b9b4f14eda6734fe3e4758.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 February 2023 09:04 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/7 "2023-02-22T09:04:03Z")

</div>

Using a bar chart you would send a payload formated like these examples [node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)

but if you update your dashboard node to latest

you can use the gauge and fill from center  
eg

```auto
[{"id":"7d193ecae230ff14","type":"inject","z":"8a39156f80306c37","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-2000","payloadType":"num","x":210,"y":200,"wires":[["3dcb6e034db30680"]]},{"id":"3dcb6e034db30680","type":"ui_gauge","z":"8a39156f80306c37","name":"","group":"2d4fe667.28f8ba","order":19,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{msg.payload}}","min":"-4000","max":"4000","colors":["#ff0000","#e6e600","#00ff00"],"seg1":"0","seg2":"0","diff":true,"className":"","x":350,"y":160,"wires":[]},{"id":"15412fd83aa65564","type":"inject","z":"8a39156f80306c37","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":210,"y":240,"wires":[["3dcb6e034db30680"]]},{"id":"0257d87b2f3e8e81","type":"inject","z":"8a39156f80306c37","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2000","payloadType":"num","x":210,"y":280,"wires":[["3dcb6e034db30680"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![chrome_screenshot_1677056516203](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d23a043ae15bf25cadbc7c0c13b923b0cb1bc26.png)  
 ![chrome_screenshot_1677056611819](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/efb5dfa91c15b295695ee83c683beb9b6927798f.jpeg)

---

<div class="post-metadata">

**Author:** ![fritserasmus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fritserasmus/32/274_2.png) [@fritserasmus](https://discourse.nodered.org/u/fritserasmus)\
**Post date:** [22 February 2023 13:16 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/8 "2023-02-22T13:16:24Z")

</div>

> [@E1cid](#):
>
> you can use the gauge and fill from center

Thank you so much for your QUICK responses and expert assistance.  
I really appreciate it very much.

I now have a gauge that shows me in which direction the electricity flows!!!!  
AWESOME Thank you!

🕺

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 March 2023 13:16 UTC](https://discourse.nodered.org/t/how-do-extract-specific-topic-from-payload-msg-and-display-in-a-dial-on-the-dashboard/75509/9 "2023-03-24T13:16:32Z")

</div>

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