# Best way to populate many ui-gauges-Classic

**URL:** <https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169>\
**Category:** General\
**Created:** [4 October 2024 19:28 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169 "2024-10-04T19:28:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![chuckf201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chuckf201/32/91382_2.png) [@chuckf201](https://discourse.nodered.org/u/chuckf201)\
**Post date:** [4 October 2024 19:28 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/1 "2024-10-04T19:28:09Z")

</div>

I have a sql server with 10 columns of weather related information (Temperature, BarrPress, Humidity, outside\_temp, outside\_humid,...etc) and  
I want to use UI-gauge-classic. I'll windup with many gauges but at least it would take up less space.

1. I can use multiple **function** nodes for each column such as:

```auto
   msg.payload = msg.payload[0].Temperature
   msg.topic = "temperature";
   return msg;

```

or  
I can use **change** nodes to do the same thing.  
Which one is cleaner and easier to maintain?  
Thanks

---

<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:** [4 October 2024 20:48 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/2 "2024-10-04T20:48:36Z")

</div>

A change node is generally preferable to a function node as it is more efficient and less likely to have bugs.

---

<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:** [4 October 2024 21:15 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/3 "2024-10-04T21:15:24Z")

</div>

You could also consider a single function node with multiple outputs.

```auto
msg.payload = msg.payload[0].Temperature
msg.topic = "temperature"
const msg1 = {"payload": msg.payload[0].BarrPress, "topic": "Pressure"}
const msg2 = {"payload": msg.payload[0].Humidity, "topic": "Humidity"}
etc

return [msg, msg1, msg2, ...]

```

---

<div class="post-metadata">

**Author:** ![chuckf201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chuckf201/32/91382_2.png) [@chuckf201](https://discourse.nodered.org/u/chuckf201)\
**Post date:** [5 October 2024 19:37 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/4 "2024-10-05T19:37:36Z")

</div>

Thank you. jbuud's solution yields less total node. I'll try that one.

---

<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:** [5 October 2024 20:45 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/5 "2024-10-05T20:45:12Z")

</div>

Building on @jbudd's solution you could do something like

```auto
const keys = ["Temperature", "BarrPress", "Humidity"]
let messages = keys.map((key) => {
    return {payload: msg.payload[0][key]}
})
return messages;

```

Do you need msg.topic? If you need it because you are using multiple needles then it becomes a little more complex.

```auto
const keys = [
    {payload: "Temperature", topic: "temperature"},
    {payload: "BarrPress", topic: "pressure"},
    {payload: "Humidity", topic: "humidity"}
]
let messages = keys.map((key) => {
    return {payload: msg.payload[0][key.payload], topic: key.topic}
})
return messages;

```

The advantage of using a structure like that is that you are separating the data from the logic. So if you want to add a new key, or change it, you just change the structure at the start, the code itself remains the same.

---

<div class="post-metadata">

**Author:** ![chuckf201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chuckf201/32/91382_2.png) [@chuckf201](https://discourse.nodered.org/u/chuckf201)\
**Post date:** [6 October 2024 20:30 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/6 "2024-10-06T20:30:57Z")

</div>

Guys,  
I will try both. Experimentation is important to throughly understanding.  
Whenever I read this site I keep saying "I didn't know I could do that.  
Thank you.  
Yes, multiple payloads with multiple topics.

I will also experiment with this idea. With multiple pointers, why not complex labels such as Temp:yellow,76 BarrPress:Green,1008

---

<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:** [6 October 2024 20:42 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/7 "2024-10-06T20:42:56Z")

</div>

> [@chuckf201](#):
>
> why not complex labels such as Temp:yellow,76 BarrPress:Green,1008

I don't understand what you mean by that.

---

<div class="post-metadata">

**Author:** ![chuckf201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chuckf201/32/91382_2.png) [@chuckf201](https://discourse.nodered.org/u/chuckf201)\
**Post date:** [6 October 2024 21:35 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/8 "2024-10-06T21:35:51Z")

</div>

text for the guage (from payload) to show multiple values for each pointer.  
 ![ui-gauge-classsic](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c6114f063a0eaaf287c3face726f60848938d220.png)

Just wondering how to do this.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [7 October 2024 04:09 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/9 "2024-10-07T04:09:10Z")

</div>

I think you are confused.

That picture with the coloured arc (green, blue, yellow) is not from the data.

It is set for the range.

I think you can _cheat_ and have dynamic ranges, but that doesn't make sense with what I understand you are doing.  
So I won't elaborate on that.

---

<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:** [7 October 2024 08:38 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/10 "2024-10-07T08:38:48Z")

</div>

I assume you know that you can display whatever text you want in the text fields. The font size should be controllable by using CSS, but I don't know how to allow multiple lines in the field.

---

<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:** [7 October 2024 08:39 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/11 "2024-10-07T08:39:36Z")

</div>

> [@Trying\_to\_learn](#):
>
> I think you are confused.

It is the text below the hub that @chuckf201 wants to configure.

---

<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:** [7 October 2024 08:41 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/12 "2024-10-07T08:41:54Z")

</div>

You could certainly put the first line in the field above the hub (msg.measurement), and the second in the field below the hub (msg.formattedValue)

---

<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:** [5 January 2025 08:42 UTC](https://discourse.nodered.org/t/best-way-to-populate-many-ui-gauges-classic/92169/13 "2025-01-05T08:42:15Z")

</div>

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