JSON data to Dashboard Chart

Dashboard
1

Hi,

I'm trying to visualize data from a JSON using a Chart node and I need help. It's data from a temperature sensor, and retreived using the Thinkspeak.com API

What is the best way to plot these data to the Dashboard Chart?
The X serie will be "created_at" and Y will be "field1"

{
"channel":
{
"id":XXXXXXX,"name":"temperature sensor",
"description":"Temperatura / Prototipo 1 Esp8266 /Sensor /PowerBank / Deepsleep ",
"latitude":"0.0",
"longitude":"0.0",
"field1":"Temperatura",
"created_at":"2018-09-23T13:26:03Z",
"updated_at":"2018-09-29T22:48:56Z",
"last_entry_id":964
},

"feeds":[
{"created_at":"2018-10-08T14:25:17Z","entry_id":955,"field1":"693"},
{"created_at":"2018-10-08T14:34:58Z","entry_id":956,"field1":"687"},
{"created_at":"2018-10-08T14:44:36Z","entry_id":957,"field1":"668"},
{"created_at":"2018-10-08T14:54:17Z","entry_id":958,"field1":"693"},
{"created_at":"2018-10-08T15:03:54Z","entry_id":959,"field1":"725"},
{"created_at":"2018-10-08T15:13:35Z","entry_id":960,"field1":"712"},
{"created_at":"2018-10-08T15:23:14Z","entry_id":961,"field1":"687"},
{"created_at":"2018-10-08T15:32:54Z","entry_id":962,"field1":"643"},
{"created_at":"2018-10-08T15:42:33Z","entry_id":963,"field1":"631"},
{"created_at":"2018-10-08T15:52:13Z","entry_id":964,"field1":"668"}
]
}

thank you very much for your help!

Regards,
Adrian

2

It would be a pretty standard pattern: a jsonata expression to transform the dataset and then a function node to prepare the data array to be charted.

Please check if it works for you.

[{"id":"11fe5226.c1852e","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"1f235c13.329e84","type":"ui_chart","z":"11fe5226.c1852e","name":"","group":"2257ffde.e0372","order":0,"width":0,"height":0,"label":"{{msg.label}}","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"step","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":750,"y":200,"wires":[[],[]]},{"id":"f8e76a2d.53a1f8","type":"inject","z":"11fe5226.c1852e","name":"","topic":"","payload":"[]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":610,"y":200,"wires":[["1f235c13.329e84"]]},{"id":"57b6fd03.409fb4","type":"change","z":"11fe5226.c1852e","name":"Data Array","rules":[{"t":"set","p":"data","pt":"msg","to":"$.feeds.{\"x\":created_at, \"y\" : field1}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":140,"wires":[["5d6b75fd.a012bc"]]},{"id":"5d6b75fd.a012bc","type":"function","z":"11fe5226.c1852e","name":"Setup payload","func":"series = [];\ndata = [];\nlabels = [];\n\nseries.push(\"Field1\");\nlabels.push(\"Field1\");\ndata.push(msg.data);\n\nmsg.payload = [{\"series\":series, \"data\":data,\"labels\": labels}];\n\nreturn msg;","outputs":1,"noerr":0,"x":580,"y":140,"wires":[["1f235c13.329e84","f7632553.21d7c8"]]},{"id":"78688515.e7a22c","type":"function","z":"11fe5226.c1852e","name":"Dataset","func":"msg = \n\n{\n\"channel\":\n{\n\"id\":\"XXXXXXX\",\"name\":\"temperature sensor\",\n\"description\":\"Temperatura / Prototipo 1 Esp8266 /Sensor /PowerBank / Deepsleep \",\n\"latitude\":\"0.0\",\n\"longitude\":\"0.0\",\n\"field1\":\"Temperatura\",\n\"created_at\":\"2018-09-23T13:26:03Z\",\n\"updated_at\":\"2018-09-29T22:48:56Z\",\n\"last_entry_id\":964\n},\n\n\"feeds\":[\n{\"created_at\":\"2018-10-08T14:25:17Z\",\"entry_id\":955,\"field1\":\"693\"},\n{\"created_at\":\"2018-10-08T14:34:58Z\",\"entry_id\":956,\"field1\":\"687\"},\n{\"created_at\":\"2018-10-08T14:44:36Z\",\"entry_id\":957,\"field1\":\"668\"},\n{\"created_at\":\"2018-10-08T14:54:17Z\",\"entry_id\":958,\"field1\":\"693\"},\n{\"created_at\":\"2018-10-08T15:03:54Z\",\"entry_id\":959,\"field1\":\"725\"},\n{\"created_at\":\"2018-10-08T15:13:35Z\",\"entry_id\":960,\"field1\":\"712\"},\n{\"created_at\":\"2018-10-08T15:23:14Z\",\"entry_id\":961,\"field1\":\"687\"},\n{\"created_at\":\"2018-10-08T15:32:54Z\",\"entry_id\":962,\"field1\":\"643\"},\n{\"created_at\":\"2018-10-08T15:42:33Z\",\"entry_id\":963,\"field1\":\"631\"},\n{\"created_at\":\"2018-10-08T15:52:13Z\",\"entry_id\":964,\"field1\":\"668\"}\n]\n}\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":140,"wires":[["57b6fd03.409fb4"]]},{"id":"e21cd684.f93dd8","type":"inject","z":"11fe5226.c1852e","name":"Trigger","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":120,"y":140,"wires":[["78688515.e7a22c"]]},{"id":"f7632553.21d7c8","type":"debug","z":"11fe5226.c1852e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":750,"y":140,"wires":[]},{"id":"2257ffde.e0372","type":"ui_group","z":"","name":"Group 1","tab":"7ca87b7b.b32a64","disp":true,"width":"12","collapse":false},{"id":"7ca87b7b.b32a64","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard"}]

r-01
r-01.PNG826Ă—545 19.4 KB

2 Likes
3

FWIW, it is also possible to build the entire chart data msg inside the JSONata expression, without needing to build the structure around the data in another function node:

[{
    "series": ["Field1"],
    "labels": ["Field1"],
    "data": $$.feeds.[{
        "x": created_at,
        "y": $number(field1)
    }]
}]

Adrian, if you have not seen the JSONata "Tester" edit panel, it's hiding under the J: typed input editor panel -- pasting your msg data into the left-hand panel, you can see the chart data results immediately inside the right-hand panel...

image
image.png822Ă—672 30.3 KB

2 Likes
4

Andrei,

Thank you so much for your help! It worked perfectly fine with live data from the API. I will continue to learn and hopefully to contribute to the forum. Again, thank you very much

Regards,
Adrian

1 Like
5

Hi,
I can't convert json data to chart. I expect your help. Thanks.

image
image.png1689Ă—355 69.1 KB

[{"id":"ca03e71.4f8c818","type":"ui_chart","z":"f8f17fac.02643","name":"","group":"d7a956c6.14c398","order":1,"width":"6","height":"4","label":"5min","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":940,"y":140,"wires":[]},{"id":"d7a956c6.14c398","type":"ui_group","z":"","name":"USDTRY","tab":"8d76ae87.104dd","order":1,"disp":true,"width":"6","collapse":false},{"id":"8d76ae87.104dd","type":"ui_tab","z":"","name":"Döviz Kuru","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

6

It looks like you are retreiving some data from a website. Not kowing what the data is makes it hard to ofer any suggestions.

If you haven't used the chart node before, I suggest you look and try some of the examples that are offered in the flow section of the website. Then when you know how to have data show up, look at tehe data you are getting from the website and transfer it (using a change node or function node) to what the chart is looking for.

7

It’s also better to open a new post if you are asking for help on a general issue. Otherwise the threads get very long…