# How to display JSON Data in a Gauge?

**URL:** <https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900>\
**Category:** Dashboard\
**Created:** [5 May 2025 12:31 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900 "2025-05-05T12:31:08Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![PokeSiMon](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@PokeSiMon](https://discourse.nodered.org/u/PokeSiMon)\
**Post date:** [5 May 2025 12:31 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/1 "2025-05-05T12:31:08Z")

</div>

Hi I am new to node-red and have already figured out how to get the data from a JSON website in to node-red using inject-node + http-request-node & the debug-node. Also figured out how to extract specific data contained within the JSON object payload with debug-node.

So now I want to use a Gauge (i downloaded the dashboard-extentions already) to display values between 0-100 from that JSON page.

Can someone give me a hint?  
Thanks

Simon

---

<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:** [5 May 2025 13:42 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/2 "2025-05-05T13:42:14Z")

</div>

How to do it depends on whether you are using the original node-red-dashboard, @flowfuse/node-red-dashboard or some other dashboard extension.

Easier to give a hint if you include a sample of your json object. Post as data, not a screen capture please.

---

<div class="post-metadata">

**Author:** ![PokeSiMon](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@PokeSiMon](https://discourse.nodered.org/u/PokeSiMon)\
**Post date:** [5 May 2025 14:02 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/3 "2025-05-05T14:02:31Z")

</div>

Hi Thanks!

I am using the standard "node-red-dashboard 3.6.5"

And I am not sure if this is what you need - I just copied to clipboard & pasted here because as a new user I am not allowed to upload exported JSON-files ☹

```auto
[
    {
        "id": "1dee7bec5e83924f",
        "type": "debug",
        "z": "9311b4c7d2d6c16c",
        "name": "Nur Rapid",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload[\"machine data\"].RapidOverrideManualRapidOverride",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 660,
        "y": 360,
        "wires": []
    },
    {
        "id": "a4872b60eeaa7066",
        "type": "http request",
        "z": "9311b4c7d2d6c16c",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "http://192.168.178.254/json/json",
        "tls": "",
        "persist": false,
        "proxy": "",
        "insecureHTTPParser": false,
        "authType": "",
        "senderr": false,
        "headers": [],
        "x": 450,
        "y": 260,
        "wires": [
            [
                "2efc53e5b47c07a9",
                "1dee7bec5e83924f"
            ]
        ]
    },
    {
        "id": "44c4b48f434623ff",
        "type": "inject",
        "z": "9311b4c7d2d6c16c",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 260,
        "y": 120,
        "wires": [
            [
                "a4872b60eeaa7066"
            ]
        ]
    },
    {
        "id": "2efc53e5b47c07a9",
        "type": "debug",
        "z": "9311b4c7d2d6c16c",
        "name": "Alles",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 650,
        "y": 280,
        "wires": []
    }
]

```

---

<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:** [5 May 2025 14:12 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/4 "2025-05-05T14:12:16Z")

</div>

> [@PokeSiMon](#):
>
> I am using the standard "node-red-dashboard 3.6.5"

node-red-dashboard uses a javascript library which is no longer supported. Since you are new to Node-red, it would be wiser to use it's replacement @flowfuse/node-red-dashboard. It's very different and time spent learning the original is probably wasted.

> [@PokeSiMon](#):
>
> And I am not sure if this is what you need

No, I meant the data which shows up in the debug node. There is a "copy value" button which shows up when you hover the mouse over the debug message

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0ed6cc6fe7b4e93e3b5aad13d47df818d2bc4d91.png)

And to paste it here, click on the preformatted text button `</>` and paste your data (or code) between the two lines of backticks.

---

<div class="post-metadata">

**Author:** ![PokeSiMon](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@PokeSiMon](https://discourse.nodered.org/u/PokeSiMon)\
**Post date:** [6 May 2025 07:54 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/5 "2025-05-06T07:54:13Z")

</div>

Hi there - okay, so I installed the suggested Dashboard successfully.

Then I copied the data in the debug node.

Please disregard the data from my original post, for testing-convenience I am now using other data which looks different but comes from a JSON page and looks like this:

```auto
{"message":"success","iss_position":{"longitude":"18.5899","latitude":"-28.4088"},"timestamp":1746517625}

```

I want to learn how to get this data in to a chart or gauge.  
Fully aware that it doesn't make sense to have longitude latitude or timestamp in a chart or gauge, but I am just using these values to practise, being easily accessible here:

[http://api.open-notify.org/iss-now.json](http://api.open-notify.org/iss-now.json)

Thank you!

---

<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 May 2025 08:10 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/6 "2025-05-06T08:10:24Z")

</div>

You just need to move the value you want into msg.payload and feed it to the chart. So if you wanted to chart the longitude, for example, you would need a Change node that Moves msg.payload.iss\_position.longitude To msg.payload.

As you are just starting with node-red I recommend watching this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

---

<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 May 2025 09:11 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/7 "2025-05-06T09:11:03Z")

</div>

By the way, do not get confused over the term JSON. A JSON object is a string representation of a javascript object. A javascript object is not JSON, it is a javascript object.

[This post](https://www.koombea.com/blog/json-vs-javascript/) and [this post](https://dev.to/desoga/javascript-object-vs-json-demystified-494j) should help to clarify the difference between Javascript objects and JSON.

---

<div class="post-metadata">

**Author:** ![PokeSiMon](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@PokeSiMon](https://discourse.nodered.org/u/PokeSiMon)\
**Post date:** [7 May 2025 11:32 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/8 "2025-05-07T11:32:47Z")

</div>

Hi, I read the articles and watches the first few of the YouTube vids - thank you!

I created a change node and pot in what I think you meant, Colin.

It appears that I managed to get the longitude in to the desired msg.payload:

**7.5.2025, 13:36:28[node: debug 2](http://127.0.0.1:1880/#)msg.payload : string[8] "-52.6729**"

How do I inject this in to a gauge then?  
In the gauge settings, I can only see that you can change its appearance.

---

<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 May 2025 12:08 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/9 "2025-05-07T12:08:51Z")

</div>

Just connect the Change node to the gauge.

---

<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 May 2025 12:38 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/10 "2025-05-07T12:38:10Z")

</div>

Obviously, if you want to show a negative number, then make sure that the range of the gauge is setup appropriately, -100 to +100 for example.

---

<div class="post-metadata">

**Author:** ![PokeSiMon](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@PokeSiMon](https://discourse.nodered.org/u/PokeSiMon)\
**Post date:** [7 May 2025 13:42 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/11 "2025-05-07T13:42:15Z")

</div>

Got it°!!!!!!!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/5279d8441d0c1dde634f456612d94a4bd92a6c81.png)

Now I have what I need to get going and thank you so much!

On the way I found this one which helped me a lot - maybe for someone reading this:

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/902a08ff4f2fde55db8771a27ff4cf8aaa9fbf88.jpeg "Getting Started - Node-RED & FlowFuse Dashboard") ](https://www.youtube.com/watch?v=DFNv91TTt68)

Thanks Colin and jbudd!

---

<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:** [6 June 2025 13:42 UTC](https://discourse.nodered.org/t/how-to-display-json-data-in-a-gauge/96900/12 "2025-06-06T13:42:53Z")

</div>

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