# JSON file with a lot of sensors data into Charts

**URL:** <https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622>\
**Category:** General\
**Created:** [1 June 2020 12:40 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622 "2020-06-01T12:40:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kywalh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kywalh/32/23100_2.png) [@Kywalh](https://discourse.nodered.org/u/Kywalh)\
**Post date:** [1 June 2020 12:40 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/1 "2020-06-01T12:40:02Z")

</div>

Hi all,  
I discovered Node-Red yesterday for my personnal raspberry pi project...  
The project "results" in a generation of a JSON file that embeds a lot of sensors data as follow:

```auto
[
  {
    "Timestamp": "2020-06-01;13:50:56",
    "Temperature Terre Gauche": "255",
    "Temperature Terre Droite": "255",
    "Humidite Terre Gauche": "8%",
    "Humidite Terre Droite": "8%",
    "Temperature Air": "25.03",
    "Pression Atmo": "991.8483823706332",
    "Humidite Relative": "42.66742746470172",
    "Vitesse Vent": "25",
    "Direction Vent": "NO",
    "Pluie": "Raining"
  },
  {
    "Timestamp": "2020-06-01;13:50:57",
    "Temperature Terre Gauche": "255",
    "Temperature Terre Droite": "255",
    "Humidite Terre Gauche": "8%",
    "Humidite Terre Droite": "8%",
    "Temperature Air": "25.06",
    "Pression Atmo": "991.8648711222133",
    "Humidite Relative": "42.66744387693944",
    "Vitesse Vent": "25",
    "Direction Vent": "NO",
    "Pluie": "Raining"
  }
etc.....
]

```

As you can imagine, I'd like to plot these data in charts but I don't manage to make it work because I'm totally new into this...  
It seems that I have to add some functions between the JSON and the chart but I don't understand what I'm doing...

```auto
[{"id":"5c5d85ec.5d1ddc","type":"inject"}]

```

Any help appreciated.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [1 June 2020 16:08 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/2 "2020-06-01T16:08:35Z")

</div>

I would recommend you watch [this full playlist](https://www.youtube.com/watch?v=ksGeUD26Mw0&list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6) to understand what node-red is, what it is not and how it works - it touches all aspects.

After that you can look at node-red-dashboard and create a dashboard with charts etc.

---

<div class="post-metadata">

**Author:** ![Kywalh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kywalh/32/23100_2.png) [@Kywalh](https://discourse.nodered.org/u/Kywalh)\
**Post date:** [1 June 2020 16:23 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/3 "2020-06-01T16:23:01Z")

</div>

Thanks for your advices !

I've done that already last night and this morning but it doesn't really help me solving my headacke.  
These videos are more on Node-Red it self than on JSON to Chart...

I'll keep browsing on Internet if I can find some quick solution, knowing that it will most probably be the only time of my life I'll use Node-red (At least, I'm honnest 😃)

---

<div class="post-metadata">

**Author:** ![Kywalh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kywalh/32/23100_2.png) [@Kywalh](https://discourse.nodered.org/u/Kywalh)\
**Post date:** [1 June 2020 16:42 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/4 "2020-06-01T16:42:29Z")

</div>

I would be extremely grateful if someone could show me how to display timestamp in x and any sensor data in y...  
I'll make the rest to duplicate the code to the other sensors and status...

🙏

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [1 June 2020 16:51 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/5 "2020-06-01T16:51:15Z")

</div>

> but it doesn't really help me solving my headacke.

It covers everything in terms of messages. If you want a chart you will need to format it correctly, see the node-red-dashboard documentation for charts.

---

<div class="post-metadata">

**Author:** ![Kywalh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kywalh/32/23100_2.png) [@Kywalh](https://discourse.nodered.org/u/Kywalh)\
**Post date:** [1 June 2020 17:06 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/6 "2020-06-01T17:06:57Z")

</div>

I understand that you'd like me to find by myself by exploring the wikis and documentations...  
... However, I'm not in this area of competences...  
I manage by sweeting to create my raspberry Python program since weeks now and I was expecting node-red to be a quick tool to visualize my data.  
I unfortunately don't have time enough to dig deep in node-red but on the other side, I'll be super frustrated to be forced to use excel to display my data... 😢

I know that the philosophy of "do it for me" is not appreciated but again, investing time on this for a one shot time isn't a preferred scenario for me at that stage...

I hope you understand...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 June 2020 17:13 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/7 "2020-06-01T17:13:56Z")

</div>

How big is that array of data ?  
My simplistic way to handle that would be to use a split node to create multiple separate messages. Then use a change node to set msg.timestamp to the msg.payload.Timestamp - then split the objects again to get the piece parts, then feed to a switch to separate them into groups or whatever... as I assume they can't all be charted...

Something like this to get you started...

```auto
[{"id":"6d769f11.3fec5","type":"inject","z":"a3c2a16b.fa113","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":1300,"wires":[["99f3bbf0.ddd0d8"]]},{"id":"99f3bbf0.ddd0d8","type":"function","z":"a3c2a16b.fa113","name":"","func":"msg.payload = [\n {\n \"Timestamp\": \"2020-06-01;13:50:56\",\n \"Temperature Terre Gauche\": \"255\",\n \"Temperature Terre Droite\": \"255\",\n \"Humidite Terre Gauche\": \"8%\",\n \"Humidite Terre Droite\": \"8%\",\n \"Temperature Air\": \"25.03\",\n \"Pression Atmo\": \"991.8483823706332\",\n \"Humidite Relative\": \"42.66742746470172\",\n \"Vitesse Vent\": \"25\",\n \"Direction Vent\": \"NO\",\n \"Pluie\": \"Raining\"\n },\n {\n \"Timestamp\": \"2020-06-01;13:50:57\",\n \"Temperature Terre Gauche\": \"255\",\n \"Temperature Terre Droite\": \"255\",\n \"Humidite Terre Gauche\": \"8%\",\n \"Humidite Terre Droite\": \"8%\",\n \"Temperature Air\": \"25.06\",\n \"Pression Atmo\": \"991.8648711222133\",\n \"Humidite Relative\": \"42.66744387693944\",\n \"Vitesse Vent\": \"25\",\n \"Direction Vent\": \"NO\",\n \"Pluie\": \"Raining\"\n }\n]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":270,"y":1300,"wires":[["cd3b127f.fb703"]]},{"id":"cd3b127f.fb703","type":"split","z":"a3c2a16b.fa113","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":410,"y":1300,"wires":[["a14f4fc5.ab7fe"]]},{"id":"a14f4fc5.ab7fe","type":"change","z":"a3c2a16b.fa113","name":"","rules":[{"t":"set","p":"timestamp","pt":"msg","to":"payload.Timestamp","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":1300,"wires":[["24debbf5.1ccb14"]]},{"id":"24debbf5.1ccb14","type":"split","z":"a3c2a16b.fa113","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","x":750,"y":1300,"wires":[["2921c0f5.7d8d4","4b4d1add.0056e4"]]},{"id":"2921c0f5.7d8d4","type":"debug","z":"a3c2a16b.fa113","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":890,"y":1300,"wires":[]},{"id":"4b4d1add.0056e4","type":"switch","z":"a3c2a16b.fa113","name":"","property":"topic","propertyType":"msg","rules":[{"t":"cont","v":"Temperature","vt":"str"},{"t":"cont","v":"Humidite","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":3,"x":700,"y":1400,"wires":[["7c06cf8e.dfe3b"],["8e2a22aa.7999e"],[]]},{"id":"7c06cf8e.dfe3b","type":"ui_chart","z":"a3c2a16b.fa113","name":"","group":"298d0e23.9e2842","order":1,"width":"12","height":"7","label":"Temperature","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":890,"y":1360,"wires":[[]]},{"id":"8e2a22aa.7999e","type":"ui_chart","z":"a3c2a16b.fa113","name":"","group":"298d0e23.9e2842","order":1,"width":"12","height":"7","label":"Humidite","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":880,"y":1400,"wires":[[]]},{"id":"298d0e23.9e2842","type":"ui_group","z":"","name":"Group 1","tab":"38bc7756.d46238","order":1,"disp":true,"width":"12","collapse":false},{"id":"38bc7756.d46238","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

**Author:** ![Kywalh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kywalh/32/23100_2.png) [@Kywalh](https://discourse.nodered.org/u/Kywalh)\
**Post date:** [1 June 2020 17:53 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/8 "2020-06-01T17:53:18Z")

</div>

It seems to be working quite well... Thank you so much !!!!  
To answer your question, I'll take sensors data every 15min for "ever"...

I added the JSON file with a Watch trigger as follow:

 ![2020-06-01_19h53_56](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/092b2365c91a6e44afb2655ef1477c4247ea0567.png)

I also started to add few other sensors and I modified the JSON format to not have spaces in the data titles...  
So basically, from

> Temperature Terre Gauche

to

> Temperature\_Terre\_Gauche

but now, in the graphs, I still have the old titles (the ones without the spaces...) .... Weird...

 ![2020-06-01_19h52_36](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe1e883b652aca30dea121a9a8eefdb5052cc2c1.png)

```auto
[{"id":"e92c5fb1.a08b2","type":"inject"}]

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 June 2020 18:04 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/9 "2020-06-01T18:04:58Z")

</div>

Well until you restart Node-RED it will remember the old ones - so just restart Node-RED to flush it's memory. (the server end - not the browser end)

---

<div class="post-metadata">

**Author:** ![Kywalh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kywalh/32/23100_2.png) [@Kywalh](https://discourse.nodered.org/u/Kywalh)\
**Post date:** [1 June 2020 20:19 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/10 "2020-06-01T20:19:18Z")

</div>

Works PERFECTLY !!!

THANK YOU !!!

---

<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:** [31 July 2020 20:19 UTC](https://discourse.nodered.org/t/json-file-with-a-lot-of-sensors-data-into-charts/27622/11 "2020-07-31T20:19:19Z")

</div>

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