Read data from a json file and display it in a bar graph

Jean-Luc · 9 May 2022 16:22

Hello to all,
I want to make a bar graph with these values below. I read them from a file.
They are values taken every 30 minutes over a whole day.
But I'm not too comfortable with formatting this data to pass it to the Ui_graph node. I've looked at the documentation but I'm still stuck. I'm hoping to get some help with formatting this data. I'm looking for this kind of graph:

In a second step, I would like also to push the data into InfluxDb. I haven't dived into how to do it yet.

Thanks in advance for your help.

here is the flow view:

and the flow itself:

[
    {
        "id": "d62dd3291e2c9479",
        "type": "file in",
        "z": "899cbc0f626ba209",
        "name": "",
        "filename": "/home/pi/Documents/ma_conso.json",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 360,
        "y": 320,
        "wires": [
            [
                "39f6aff4a2f6119b"
            ]
        ]
    },
    {
        "id": "8c23a9f2506e9cc8",
        "type": "inject",
        "z": "899cbc0f626ba209",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 120,
        "y": 320,
        "wires": [
            [
                "d62dd3291e2c9479"
            ]
        ]
    },
    {
        "id": "df13b076bc200117",
        "type": "debug",
        "z": "899cbc0f626ba209",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 770,
        "y": 320,
        "wires": []
    },
    {
        "id": "39f6aff4a2f6119b",
        "type": "json",
        "z": "899cbc0f626ba209",
        "name": "",
        "property": "payload",
        "action": "",
        "pretty": false,
        "x": 610,
        "y": 320,
        "wires": [
            [
                "df13b076bc200117"
            ]
        ]
    }
]

Here is the result of the debug node:

{"unit":"W","data":[{"date":"2022-05-08 00:30:00","value":14},{"date":"2022-05-08 01:00:00","value":16},{"date":"2022-05-08 01:30:00","value":16},{"date":"2022-05-08 02:00:00","value":16},{"date":"2022-05-08 02:30:00","value":16},{"date":"2022-05-08 03:00:00","value":16},{"date":"2022-05-08 03:30:00","value":16},{"date":"2022-05-08 04:00:00","value":16},{"date":"2022-05-08 04:30:00","value":44},{"date":"2022-05-08 05:00:00","value":14},{"date":"2022-05-08 05:30:00","value":16},{"date":"2022-05-08 06:00:00","value":16},{"date":"2022-05-08 06:30:00","value":60},{"date":"2022-05-08 07:00:00","value":64},{"date":"2022-05-08 07:30:00","value":64},{"date":"2022-05-08 08:00:00","value":60},{"date":"2022-05-08 08:30:00","value":64},{"date":"2022-05-08 09:00:00","value":64},{"date":"2022-05-08 09:30:00","value":62},{"date":"2022-05-08 10:00:00","value":62},{"date":"2022-05-08 10:30:00","value":62},{"date":"2022-05-08 11:00:00","value":62},{"date":"2022-05-08 11:30:00","value":18},{"date":"2022-05-08 12:00:00","value":16},{"date":"2022-05-08 12:30:00","value":16},{"date":"2022-05-08 13:00:00","value":32},{"date":"2022-05-08 13:30:00","value":48},{"date":"2022-05-08 14:00:00","value":16},{"date":"2022-05-08 14:30:00","value":36},{"date":"2022-05-08 15:00:00","value":20},{"date":"2022-05-08 15:30:00","value":16},{"date":"2022-05-08 16:00:00","value":16},{"date":"2022-05-08 16:30:00","value":16},{"date":"2022-05-08 17:00:00","value":16},{"date":"2022-05-08 17:30:00","value":16},{"date":"2022-05-08 18:00:00","value":16},{"date":"2022-05-08 18:30:00","value":14},{"date":"2022-05-08 19:00:00","value":18},{"date":"2022-05-08 19:30:00","value":32},{"date":"2022-05-08 20:00:00","value":16},{"date":"2022-05-08 20:30:00","value":16},{"date":"2022-05-08 21:00:00","value":16},{"date":"2022-05-08 21:30:00","value":16},{"date":"2022-05-08 22:00:00","value":14},{"date":"2022-05-08 22:30:00","value":16},{"date":"2022-05-08 23:00:00","value":16},{"date":"2022-05-08 23:30:00","value":16},{"date":"2022-05-09 00:00:00","value":16}]}

and here is the file in case of testing:
ma_conso.json (4.2 KB)

E1cid · 9 May 2022 16:56

Then you would format the data according to these formats

github.com

node-red/node-red-dashboard/blob/master/Charts.md

# Node-RED-Dashboard Charts

## Live data

To display live data just wire up an input with a `msg.payload` that contains a number.


### Line charts

To display two or more lines on the same chart then each `msg` must also contain `topic`
property that identifies which data series it belongs to - for example:

    {topic:"temperature", payload:22}
    {topic:"humidity", payload:66}

Each series will be represented by a different colour.
Alternatively you can use the property `series` instead of `topic` if you prefer.

It is possible to create "gaps" in line charts by sending either a null or boolean false as the payload.

This file has been truncated. show original

similar to this

[{"id":"8c23a9f2506e9cc8","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"unit\":\"W\",\"data\":[{\"date\":\"2022-05-08 00:30:00\",\"value\":14},{\"date\":\"2022-05-08 01:00:00\",\"value\":16},{\"date\":\"2022-05-08 01:30:00\",\"value\":16},{\"date\":\"2022-05-08 02:00:00\",\"value\":16},{\"date\":\"2022-05-08 02:30:00\",\"value\":16},{\"date\":\"2022-05-08 03:00:00\",\"value\":16},{\"date\":\"2022-05-08 03:30:00\",\"value\":16},{\"date\":\"2022-05-08 04:00:00\",\"value\":16},{\"date\":\"2022-05-08 04:30:00\",\"value\":44},{\"date\":\"2022-05-08 05:00:00\",\"value\":14},{\"date\":\"2022-05-08 05:30:00\",\"value\":16},{\"date\":\"2022-05-08 06:00:00\",\"value\":16},{\"date\":\"2022-05-08 06:30:00\",\"value\":60},{\"date\":\"2022-05-08 07:00:00\",\"value\":64},{\"date\":\"2022-05-08 07:30:00\",\"value\":64},{\"date\":\"2022-05-08 08:00:00\",\"value\":60},{\"date\":\"2022-05-08 08:30:00\",\"value\":64},{\"date\":\"2022-05-08 09:00:00\",\"value\":64},{\"date\":\"2022-05-08 09:30:00\",\"value\":62},{\"date\":\"2022-05-08 10:00:00\",\"value\":62},{\"date\":\"2022-05-08 10:30:00\",\"value\":62},{\"date\":\"2022-05-08 11:00:00\",\"value\":62},{\"date\":\"2022-05-08 11:30:00\",\"value\":18},{\"date\":\"2022-05-08 12:00:00\",\"value\":16},{\"date\":\"2022-05-08 12:30:00\",\"value\":16},{\"date\":\"2022-05-08 13:00:00\",\"value\":32},{\"date\":\"2022-05-08 13:30:00\",\"value\":48},{\"date\":\"2022-05-08 14:00:00\",\"value\":16},{\"date\":\"2022-05-08 14:30:00\",\"value\":36},{\"date\":\"2022-05-08 15:00:00\",\"value\":20},{\"date\":\"2022-05-08 15:30:00\",\"value\":16},{\"date\":\"2022-05-08 16:00:00\",\"value\":16},{\"date\":\"2022-05-08 16:30:00\",\"value\":16},{\"date\":\"2022-05-08 17:00:00\",\"value\":16},{\"date\":\"2022-05-08 17:30:00\",\"value\":16},{\"date\":\"2022-05-08 18:00:00\",\"value\":16},{\"date\":\"2022-05-08 18:30:00\",\"value\":14},{\"date\":\"2022-05-08 19:00:00\",\"value\":18},{\"date\":\"2022-05-08 19:30:00\",\"value\":32},{\"date\":\"2022-05-08 20:00:00\",\"value\":16},{\"date\":\"2022-05-08 20:30:00\",\"value\":16},{\"date\":\"2022-05-08 21:00:00\",\"value\":16},{\"date\":\"2022-05-08 21:30:00\",\"value\":16},{\"date\":\"2022-05-08 22:00:00\",\"value\":14},{\"date\":\"2022-05-08 22:30:00\",\"value\":16},{\"date\":\"2022-05-08 23:00:00\",\"value\":16},{\"date\":\"2022-05-08 23:30:00\",\"value\":16},{\"date\":\"2022-05-09 00:00:00\",\"value\":16}]}","payloadType":"json","x":130,"y":80,"wires":[["315c7525.b553ba"]]},{"id":"315c7525.b553ba","type":"change","z":"bf9e1e33.030598","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t{\"labels\": $$.payload.data.date,\t\"data\":[[$$.payload.data.value]],\t\"series\":[\"watts\"]\t}]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":330,"y":80,"wires":[["a9bdf66d.2d30a"]]},{"id":"a9bdf66d.2d30a","type":"ui_chart","z":"bf9e1e33.030598","name":"","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"label":"chart","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":true,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":140,"wires":[["df13b076bc200117"]]},{"id":"df13b076bc200117","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":120,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

Jean-Luc · 9 May 2022 18:25

As I wrote, I went to read this documentation and unfortunately I do not see how to manage the time data on the x-axis. Hence my request for help.

Steve-Mcl · 9 May 2022 18:27

You should try the flow that @E1cid did for you 2hrs ago (hint: it works)

Jean-Luc · 9 May 2022 18:42

I had thought that this was the example that was in the documentation. A thousand apologies and many thanks for waking me up. I'm confused and really glad to have a ready answer.
Clearly I don't understand this kind of programming and it never ceases to amaze me.

{"labels": $$.payload.data.date,	"data":[[$$.payload.data.value]],	"series":["watts"]	}]

a single line of code and bingo. Magic.

here is the result:

system · 23 May 2022 18:43

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

Topic		Replies	Views
Json in Bar-Chart Dashboard	5	383	3 November 2020
Barchart from InfluxDB request Dashboard database , influxdb	5	184	17 January 2024
Display datas from influxdb in an UI-Chart Dashboard	7	689	15 January 2023
Display datas from influx in an UI-Chart Dashboard	42	3679	6 February 2021
How to read saved data from json code to ui-chart General node-red-dashboard	2	168	19 March 2023

Read data from a json file and display it in a bar graph

Related topics