How to display JSON Data in a Gauge?

Dashboard
1

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

2

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.

3

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 :frowning:

[
    {
        "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": []
    }
]
4

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.

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
image415×165 5.14 KB

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

5

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:

{"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

Thank you!

6

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

7

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 and this post should help to clarify the difference between Javascript objects and JSON.

8

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:28node: debug 2msg.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.

9

Just connect the Change node to the gauge.

10

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.

11

Got it°!!!!!!!

image
image823×472 18.1 KB

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:

Thanks Colin and jbudd!