# Gauge node - conditional formatting

**URL:** <https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020>\
**Category:** Dashboard\
**Created:** [15 March 2025 16:20 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020 "2025-03-15T16:20:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![AloisBachmeier](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aloisbachmeier/32/82319_2.png) [@AloisBachmeier](https://discourse.nodered.org/u/AloisBachmeier)\
**Post date:** [15 March 2025 16:20 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/1 "2025-03-15T16:20:03Z")

</div>

Hi all,  
there are two gages side by side in my dashboard (actual / setpoint). Whenever "actual \< setpoint" all segment colours of the setpoint gage should change to red.  
I know I need to use a function node where I can adjust the properties of a gage (this works fine) however how to write the condition above into the function node?  
b.r. Alois

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 March 2025 17:56 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/2 "2025-03-15T17:56:10Z")

</div>

You need to provide more information, How will you know when the actual is less than the setpoint? Where are the values stored?

If you put both into the msg (say msg.actual and msg.setpoint) then the function node will have access to both and you can use an if statement.

---

<div class="post-metadata">

**Author:** ![AloisBachmeier](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aloisbachmeier/32/82319_2.png) [@AloisBachmeier](https://discourse.nodered.org/u/AloisBachmeier)\
**Post date:** [16 March 2025 08:51 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/3 "2025-03-16T08:51:58Z")

</div>

Hi Paul,  
I plan exactly what you are describeing in your last sentence! However, I do not know how to write the if statement in the correct way (I'm pretty unexperienced in JSON).  
Think I need something like the attached + the if statement.

b.r.  
Alois

```auto

const value = msg.payload
msg = {
    ui_control: {
        gtype: "gage",
        colors: ["blue", "blue", "blue"], //should change to ["red","red","red"] depending on condition. 
    },
    payload: value
}
return msg;

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 March 2025 09:23 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/4 "2025-03-16T09:23:08Z")

</div>

JSON is a formatting of the data but when you are coding you are using javascript. You can see the format of a javascript if statement at [w3school.com](http://w3school.com):  
[JavaScript if else else if](https://www.w3schools.com/js/js_if_else.asp)

Not knowing what your data looks like, I can't tell you what the if statement should look like.

You need to show what the msg going into the `function` node is so add a `debug` node (set to display the complete msg object) to the node sending the msg to the `function` node.

Copy and paste the output to a reply

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

You can edit and correct your post by clicking the pencil ✏ icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

You should also take a [JavaScript Tutorial](https://www.w3schools.com/js/default.asp)

---

<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:** [16 March 2025 09:25 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/5 "2025-03-16T09:25:05Z")

</div>

@AloisBachmeier Please don't upload files containing your code examples, add code by pasting it into the forum post following the instructions given in the post above by @zenofmud above.

I have edited your post above already.

---

<div class="post-metadata">

**Author:** ![Xenon](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xenon/32/48893_2.png) [@Xenon](https://discourse.nodered.org/u/Xenon)\
**Post date:** [16 March 2025 14:46 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/6 "2025-03-16T14:46:00Z")

</div>

Hi,  
here is a simple example how to change the values by using if conditions:

```auto
// Compare a value with msg.payload
if (myValue === msg.payload) {
    msg.ui_update = {
        segments: [
            {"color":"SkyBlue","from":10},
            {"color":"#5CD65C","from":20},
            {"color":"Orange","from":24},
            {"color":"Red","from":30}
         ]
    }
} else {
    msg.ui_update = {
        segments: [
            {"color":"Red","from":10, "to": 40}
        ]
    }
}

```

Hope this helps.

---

<div class="post-metadata">

**Author:** ![AloisBachmeier](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aloisbachmeier/32/82319_2.png) [@AloisBachmeier](https://discourse.nodered.org/u/AloisBachmeier)\
**Post date:** [17 March 2025 13:22 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/7 "2025-03-17T13:22:57Z")

</div>

Solved:

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94e73cf63e6e7e4939fd40954043d169efa2ddcd.jpeg "Node-RED: Zusammenführen von zwei verschiedenen Variablen mit dem Join Node") ](https://www.youtube.com/watch?v=vKf9VZ5A1HQ)

Thanks for help!

---

<div class="post-metadata">

**Author:** ![AloisBachmeier](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aloisbachmeier/32/82319_2.png) [@AloisBachmeier](https://discourse.nodered.org/u/AloisBachmeier)\
**Post date:** [17 March 2025 15:01 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/8 "2025-03-17T15:01:47Z")

</div>

This works:

```auto
[
    {
        "id": "33b225f17b878741",
        "type": "tab",
        "label": "Tests",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "07dad9528a80e599",
        "type": "inject",
        "z": "33b225f17b878741",
        "name": "set",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "set",
        "payload": "25",
        "payloadType": "num",
        "x": 330,
        "y": 580,
        "wires": [
            [
                "62dde39a666dd082"
            ]
        ]
    },
    {
        "id": "6306bf34e1756f60",
        "type": "debug",
        "z": "33b225f17b878741",
        "name": "debug 113",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 930,
        "y": 680,
        "wires": []
    },
    {
        "id": "69dbc75ba25016c8",
        "type": "function",
        "z": "33b225f17b878741",
        "name": "function 8",
        "func": "//\nlet _set = msg.payload[\"set\"];\nlet _act = msg.payload[\"act\"];\n\nif(_set > _act){\n msg = {\n ui_control: {\n colors: [\"red\", \"red\", \"red\"] \n },\n payload: _act\n }\n} else{\n msg = {\n ui_control: {\n colors: [\"blue\", \"blue\", \"blue\"] \n },\n payload: _act\n }\n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 700,
        "y": 620,
        "wires": [
            [
                "6306bf34e1756f60",
                "a527c7b964187763"
            ]
        ]
    },
    {
        "id": "cb15034cda0872e9",
        "type": "comment",
        "z": "33b225f17b878741",
        "name": "Gage: Conditional color",
        "info": "join: \nCollects 2 inputs and join them to an object\nand give each of the inputs a key (topic).\n\nfunction:\nReferes to this keys and create the\ncondition based on them.",
        "x": 380,
        "y": 500,
        "wires": []
    },
    {
        "id": "e5f8f82a7808197b",
        "type": "inject",
        "z": "33b225f17b878741",
        "name": "actual",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "act",
        "payload": "24",
        "payloadType": "num",
        "x": 330,
        "y": 640,
        "wires": [
            [
                "62dde39a666dd082"
            ]
        ]
    },
    {
        "id": "62dde39a666dd082",
        "type": "join",
        "z": "33b225f17b878741",
        "name": "",
        "mode": "custom",
        "build": "object",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "joinerType": "str",
        "useparts": false,
        "accumulate": false,
        "timeout": "5",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 530,
        "y": 620,
        "wires": [
            [
                "69dbc75ba25016c8"
            ]
        ]
    },
    {
        "id": "a527c7b964187763",
        "type": "ui_gauge",
        "z": "33b225f17b878741",
        "name": "",
        "group": "e14ecf9f02acfaec",
        "order": 0,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "gauge",
        "label": "units",
        "format": "{{value}}",
        "min": "15",
        "max": "35",
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "20",
        "seg2": "30",
        "diff": false,
        "className": "",
        "x": 910,
        "y": 620,
        "wires": []
    },
    {
        "id": "e14ecf9f02acfaec",
        "type": "ui_group",
        "name": "Test",
        "tab": "148d738185733779",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "148d738185733779",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<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:** [16 April 2025 15:02 UTC](https://discourse.nodered.org/t/gauge-node-conditional-formatting/96020/9 "2025-04-16T15:02:16Z")

</div>

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