How to keep the X-Axis in node red

I have this chart that is only showing the last value received and it is being replaced with every new value received and is not keeping any other values on the chart to trace them and show the history.

The idea is to show the last 24 hours of data in the chart

How can i accomplish this? Thank you

image
image

I think the problem is more in the chart node that the message you are sending it.

Can you export the chart node please?

Nah, that didn't work.

As I am sure you can see.

You need to use the </> button.
Please try again.
Oh, also: In that function node: what is the purpose of the first line?

You could just EDIT the original post (above) rather than posting another try.

[
    {
        "id": "b0422098a6b9a08d",
        "type": "webhookrelay",
        "z": "a1bcdc6a7a905fe6",
        "buckets": "",
        "x": 200,
        "y": 60,
        "wires": [
            [
                "ccdc1327defc8747"
            ]
        ]
    },
    {
        "id": "ccdc1327defc8747",
        "type": "json",
        "z": "a1bcdc6a7a905fe6",
        "name": "",
        "property": "payload",
        "action": "obj",
        "pretty": false,
        "x": 350,
        "y": 60,
        "wires": [
            [
                "0dce6426a3caa9bd"
            ]
        ]
    },
    {
        "id": "0dce6426a3caa9bd",
        "type": "change",
        "z": "a1bcdc6a7a905fe6",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "payload.body",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 500,
        "y": 60,
        "wires": [
            [
                "5f0738a9f4ed9865"
            ]
        ],
        "info": "payload.body"
    },
    {
        "id": "5f0738a9f4ed9865",
        "type": "json",
        "z": "a1bcdc6a7a905fe6",
        "name": "",
        "property": "payload",
        "action": "",
        "pretty": false,
        "x": 670,
        "y": 60,
        "wires": [
            [
                "bda5bf77f04efd85"
            ]
        ]
    },
    {
        "id": "bda5bf77f04efd85",
        "type": "change",
        "z": "a1bcdc6a7a905fe6",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "fecha",
                "pt": "msg",
                "to": "payload.timestamp",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "temperatura",
                "pt": "msg",
                "to": "payload.measurements[2].data",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 820,
        "y": 60,
        "wires": [
            [
                "5234163e24f2a616"
            ]
        ],
        "info": "payload.body"
    },
    {
        "id": "5234163e24f2a616",
        "type": "function",
        "z": "a1bcdc6a7a905fe6",
        "name": "function 18",
        "func": "let fecha=new Date(msg.fecha);\nlet milisegundos=fecha.getTime();\n\nvar chart = [{\n    \"series\": [\"A\"],\n    \"data\": [[{ \"x\":milisegundos, \"y\":msg.temperatura}]],\n    \"labels\": [\"\"]\n}];\nmsg.payload = chart;\n\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1050,
        "y": 60,
        "wires": [
            [
                "2ba287094a879405"
            ]
        ]
    },
    {
        "id": "2ba287094a879405",
        "type": "ui_chart",
        "z": "a1bcdc6a7a905fe6",
        "name": "",
        "group": "dad27409d00b75af",
        "order": 8,
        "width": 0,
        "height": 0,
        "label": "Prueba ",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": true,
        "ymin": "10",
        "ymax": "30",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "86400",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "className": "",
        "x": 1440,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "dad27409d00b75af",
        "type": "ui_group",
        "name": "Pruebas",
        "tab": "f518b18327287f13",
        "order": 3,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "f518b18327287f13",
        "type": "ui_tab",
        "name": "Tab inicial",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

The first node is called "Webhook relay"

1 Like

i'll explain you about what i do

That's a Weather Station, the weather station send the data via Webhook (For this i have that node) And that comes in JSON format

Ok, but....

I don't think it is helping you having TWO JSON nodes in the flow.
(Which version of NR are you using?)
The second change node: you are setting the msg.fecha to msg.payload.timestamp.
Does that exist? (msg.payload.timestamp?)
It doesn't seem to be really used.
It is used in the function node to set a variable's name, but that variable isn't used.

What happens if you ONLY send this:

(in the function node delete ALL the code and put ONLY THIS)

msg.payload = msg.temperatura;
return msg;

Just to indulge me.

Basically this is the flow.

[{"id":"47d34eb58e2b0e28","type":"function","z":"9b04fbf83e08a815","name":"function 19","func":"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":920,"y":500,"wires":[["6e251dd76978683d"]]},{"id":"0ea54ab2d7765f28","type":"json","z":"9b04fbf83e08a815","name":"","property":"payload","action":"obj","pretty":false,"x":760,"y":500,"wires":[["47d34eb58e2b0e28"]]},{"id":"6e251dd76978683d","type":"ui_chart","z":"9b04fbf83e08a815","name":"","group":"dad27409d00b75af","order":8,"width":0,"height":0,"label":"Prueba ","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"10","ymax":"30","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":1090,"y":500,"wires":[[]]},{"id":"223d66608b5eeb04","type":"webhookrelay","z":"9b04fbf83e08a815","buckets":"","x":560,"y":500,"wires":[["0ea54ab2d7765f28"]]},{"id":"dad27409d00b75af","type":"ui_group","name":"Pruebas","tab":"f518b18327287f13","order":3,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f518b18327287f13","type":"ui_tab","name":"Tab inicial","icon":"dashboard","disabled":false,"hidden":false}]

(I have to go. Hope that last post helped you some how.)

Thanks for the help but, That doesnt help me.

I need the every JSON nodes, i need every nodes that i sent you. Just have to fix that with the chart

For the chart either just connect the node that has the msg.temperature as an output to the ui_chart node. This will automatically show that data and the time is current time formatted by the chart node.

OR

remove the "data": [...] from var chart and use

let chart = {
    "series": ["A"],
    "data": [[]],
    "labels": []
}

chart.data[0].push({x: milisegundos, y: msg.temperature})

msg.payload = chart

Should work but not tested

Ohh thanks! i'm gonna try

Negative! Didnt work

image

The debug is an array, Do you have idea how to work?

image

If this is live data you just need to feed the temperature reading in as msg.payload and msg.topic as the series/label.
e.g.

[{"id":"b0422098a6b9a08d","type":"webhookrelay","z":"452103ea51141731","buckets":"","x":180,"y":3880,"wires":[["ccdc1327defc8747"]]},{"id":"ccdc1327defc8747","type":"json","z":"452103ea51141731","name":"","property":"payload","action":"obj","pretty":false,"x":330,"y":3880,"wires":[["0dce6426a3caa9bd"]]},{"id":"0dce6426a3caa9bd","type":"change","z":"452103ea51141731","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.body","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":3880,"wires":[["5f0738a9f4ed9865"]],"info":"payload.body"},{"id":"5f0738a9f4ed9865","type":"json","z":"452103ea51141731","name":"","property":"payload","action":"","pretty":false,"x":650,"y":3880,"wires":[["bda5bf77f04efd85"]]},{"id":"bda5bf77f04efd85","type":"change","z":"452103ea51141731","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.measurements[2].data","tot":"msg"},{"t":"set","p":"topic","pt":"msg","to":"temperature","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":800,"y":3880,"wires":[["2ba287094a879405"]],"info":"payload.body"},{"id":"2ba287094a879405","type":"ui_chart","z":"452103ea51141731","name":"","group":"dad27409d00b75af","order":8,"width":0,"height":0,"label":"Prueba ","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"10","ymax":"30","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":980,"y":3940,"wires":[[]]},{"id":"dad27409d00b75af","type":"ui_group","name":"Pruebas","tab":"f518b18327287f13","order":3,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f518b18327287f13","type":"ui_tab","name":"Tab inicial","icon":"dashboard","disabled":false,"hidden":false}]

No work, I need the function because i need that timestamp value stay in X-Axis in the chart. Do you have idea?

Great feed back "not work". Could you help by giving more info , what errors did you get, what did you see in chart.

As said all you need to do is feed the reading as msg.payload and give a topic for live data. You do not need a timestamp as chart will add one. Saying that you can send a timestamp in msg.timestamp also. All the info you need is here node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub
here is example with a timestamp

[{"id":"bf38e6dc21a1b3e3","type":"webhookrelay","z":"452103ea51141731","buckets":"","x":200,"y":3760,"wires":[["b40d1ee1892062f0"]]},{"id":"b40d1ee1892062f0","type":"json","z":"452103ea51141731","name":"","property":"payload","action":"obj","pretty":false,"x":350,"y":3760,"wires":[["edaada43ad3a90f3"]]},{"id":"edaada43ad3a90f3","type":"change","z":"452103ea51141731","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.body","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":3760,"wires":[["14467fdb64d10a49"]],"info":"payload.body"},{"id":"14467fdb64d10a49","type":"json","z":"452103ea51141731","name":"","property":"payload","action":"","pretty":false,"x":670,"y":3760,"wires":[["52f7ce4d653fd16c"]]},{"id":"52f7ce4d653fd16c","type":"change","z":"452103ea51141731","name":"","rules":[{"t":"set","p":"timestamp","pt":"msg","to":"payload.timestamp","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"payload.measurements[2].data","tot":"msg"},{"t":"set","p":"topic","pt":"msg","to":"temperature","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":820,"y":3760,"wires":[["9a4c1d9ffd55e1fc"]],"info":"payload.body"},{"id":"9a4c1d9ffd55e1fc","type":"ui_chart","z":"452103ea51141731","name":"","group":"ab373fd2c5b09a8c","order":8,"width":0,"height":0,"label":"Prueba ","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"10","ymax":"30","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":1000,"y":3820,"wires":[[]]},{"id":"ab373fd2c5b09a8c","type":"ui_group","name":"Pruebas","tab":"f518b18327287f13","order":3,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f518b18327287f13","type":"ui_tab","name":"Tab inicial","icon":"dashboard","disabled":false,"hidden":false}]

If you want more help please supply the errors you are seeing and the complete msg debug output of the webhook node. in a copyable format.

oh yes, You are right, The webhook give me this code with the 2 JSONS:

object
deviceName: "Weather Station"
deviceSerialNumber: "CM.S2B.1.1.0-N0000117"
measurements: array[6]
0: object
latitude: 6.071770000000001
longitude: -75.33387
name: "location"
1: object
data: 3
name: "air-quality"
2: object
data: 15.740000000000002
name: "temperature"
3: object
data: 97.48
name: "humidity"
4: object
data: 240
data2: 0.625
name: "wind-speed"
5: object
data: 4045
name: "battery"
timestamp: "2022-11-28T18:00:01Z"

I´ll try your code, I need that the timestamp is set in the X-Axis in the chart, Because the true hour that i want to see is located in timestamp value.

Hey man, Thanks a lot!! That work very well.

image

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