Data from MySQL db to Graph

OK, I'm back.

Its the parsing, like i said I only had 5 minutes to knock that demo up (but no time to test it)
So another 5 mins & its now pushing the data into the chart data in the correct format.

Try this instead...

[{"id":"d3d38637.1f7408","type":"inject","z":"a9fbaedc.8f9c1","name":"Fake DB data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"timeNRchar\":\"2020-11-18 18:25:48.906\",\"temp\":21.3,\"humidity\":31.2},{\"timeNRchar\":\"2020-11-18 18:16:23.957\",\"temp\":21.6,\"humidity\":32.2},{\"timeNRchar\":\"2020-11-18 18:14:06.429\",\"temp\":21.7,\"humidity\":37.2},{\"timeNRchar\":\"2020-11-18 18:13:50.943\",\"temp\":21.6,\"humidity\":44.2}]","payloadType":"json","x":140,"y":620,"wires":[["4221874.591d878"]]},{"id":"4221874.591d878","type":"function","z":"a9fbaedc.8f9c1","name":"BD Data to Chart data","func":"/* DB Data\n[{\n    \"timeNRchar\": \"2020-11-18 18:25:48.906\",\n    \"temp\": 21.6,\n    \"humidity\": 34.2\n},{\n    \"timeNRchar\": \"2020-11-18 18:16:23.957\",\n    \"temp\": 21.6,\n    \"humidity\": 34.2\n},{    \n    \"timeNRchar\": \"2020-11-18 18:14:06.429\",\n    \"temp\": 21.6,\n    \"humidity\": 34.2\n},{    \n    \"timeNRchar\": \"2020-11-18 18:13:50.943\",\n    \"temp\": 21.6,\n    \"humidity\": 34.2\n}]\n*/\n/* Desired format\n[{\n\"series\": [\"temp\", \"humidity\"],\n\"data\": [\n    [{ \"x\": 1504029632890, \"y\": 5 }, //series 1 data\n     { \"x\": 1504029636001, \"y\": 4 },\n    ],\n    [{ \"x\": 1504029633514, \"y\": 6 }, //series 2 data\n     { \"x\": 1504029636622, \"y\": 7 },\n    ],\n],\n\"labels\": [\"\"]\n}]\n*/\n\nvar series1 = [];\nvar series2 = [];\n\n//loop each row and build an array in the required format\nfor (let index = 0; index < msg.payload.length; index++) {\n    const e = msg.payload[index];\n    var t = new Date(e.timeNRchar).valueOf()\n    series1.push({ \"x\": t, \"y\": e.temp });\n    series2.push({ \"x\": t, \"y\": e.humidity });\n}\n\n\nmsg.payload = [\n    {\n        \"series\": [\"temp\", \"humidity\"],\n        \"data\":   [series1,series2],\n        \"labels\": [\"\"]\n    }\n];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":400,"y":620,"wires":[["78b2ba94.731454","175fff9a.2987f"]]},{"id":"78b2ba94.731454","type":"debug","z":"a9fbaedc.8f9c1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":630,"y":620,"wires":[]},{"id":"175fff9a.2987f","type":"ui_chart","z":"a9fbaedc.8f9c1","name":"","group":"dce9e7a2.d20c78","order":4,"width":0,"height":0,"label":"chart","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"bezier","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":590,"y":680,"wires":[[]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"7","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

word of caution...

Limit your SQL to return only as many rows to no more that your graph is wide in pixels otherwise you will unnecessarily slow the dashboard down.

Let me try that again...

If you decide to SELECT 5000 rows of data from the DB - but your graph is 1000 pixels wide - you will NOT be able to see 4000 of the rows and your dashboard will begin to crawl - there, i think that makes more sense :slight_smile:

2 Likes