# Read data from a json file and display it in a bar graph
**URL:** https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417
**Category:** Dashboard
**Created:** [9 May 2022 16:22 UTC](https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417 "2022-05-09T16:22:57Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [9 May 2022 16:22 UTC](https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417/1 "2022-05-09T16:22:57Z")
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](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md) 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:
```auto
[
{
"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:
```auto
{"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](https://discourse.nodered.org/uploads/short-url/8rBoUUlfscApOHS4fQ1sbbZROgC.json) (4.2 KB)
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [9 May 2022 16:56 UTC](https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417/2 "2022-05-09T16:56:29Z")
Then you would format the data according to these formats
>
similar to this
```auto
[{"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}]
```
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [9 May 2022 18:25 UTC](https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417/3 "2022-05-09T18:25:46Z")
> [@Jean-Luc](#):
>
> I've looked at the [documentation](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md) but I'm still stuck
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.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [9 May 2022 18:27 UTC](https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417/4 "2022-05-09T18:27:52Z")
You should try the flow that @E1cid did for you 2hrs ago (hint: it works)
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [9 May 2022 18:42 UTC](https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417/5 "2022-05-09T18:42:28Z")
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.
```auto
{"labels": $$.payload.data.date, "data":[[$$.payload.data.value]], "series":["watts"] }]
```
a single line of code and bingo. Magic.
here is the result:
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [23 May 2022 18:43 UTC](https://discourse.nodered.org/t/read-data-from-a-json-file-and-display-it-in-a-bar-graph/62417/6 "2022-05-23T18:43:09Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.