Node-RED dashboard chart node with timestamp

Dashboard
,
1

Trying to learn the dashboard ui.
I want to display a line chart of Temperature against time.

Queried this from the db.

[{"id":7,"temperature":21,"timestamp":1643461084699},{"id":6,"temperature":21,"timestamp":1643461083988},{"id":5,"temperature":21,"timestamp":1643461083135},{"id":4,"temperature":21,"timestamp":1643461082322},{"id":3,"temperature":21,"timestamp":1643461081312},{"id":2,"temperature":21,"timestamp":1643460885288},{"id":1,"temperature":21,"timestamp":1643460736085}]

Basically queried the last 10 data and got the json object there.
Tried following the github guide but he doesn't really go in depth with multiple data for time so im quite lost.

2

The guide does go into detail and the information is there. The issue is there is no one solution when it comes to displaying data - everyone has their own requirements and everyone's data is different.

Here is a flow I wrote that attempts to figure it out for you...

Be sure to read it through and check the link inside that post. You'll likely have to set some field names in the function (I forget)

3

Ah this works well.

What time format is that? I got it mostly working except the time which returns NaN.

[{"id":"a80817a3d567f813","type":"inject","z":"59f913ad10ec391d","name":"Fake DB data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"temperature\":21,\"timestamp\":\"1643461084699\"},{\"temperature\":21,\"timestamp\":\"1643461083988\"},{\"temperature\":21,\"timestamp\":\"1643461083135\"},{\"temperature\":21,\"timestamp\":\"1643461082322\"},{\"temperature\":21,\"timestamp\":\"1643461081312\"},{\"temperature\":21,\"timestamp\":\"1643460885288\"},{\"temperature\":21,\"timestamp\":\"1643460736085\"}]","payloadType":"json","x":190,"y":640,"wires":[["a60265a037b7791f"]]},{"id":"a60265a037b7791f","type":"function","z":"59f913ad10ec391d","name":"DB Data to Chart data","func":"/* DB Data\n[\n    {\n        \"Timestamp\": \"2020-11-18 18:25:48.906\",\n        \"Temp\": 21.3,\n        \"Light\": 15,\n        \"Pressure\": 18100.2,\n        \"Humidity\": 31.2\n    },\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 series = [];\nvar data = msg.payload;\nif (!data || !Array.isArray(data) || !data.length) {\n    node.warn(\"expected an array of data with at least 1 element\");\n    return null;\n    //alternatively return the msg with a null payload to clear graph\n}\n\nconst tsField = \"timestamp\";\nvar _f = Object.keys(data[0]);\nvar fields = [];\nvar fi = 0;\n_f.forEach(function(elem) {\n    if (elem != tsField) {\n        fields.push(elem);\n        series[fi++] = [];\n    }\n});\n\n//loop each row and build an array in the required format\nfor (let index = 0; index < msg.payload.length; index++) {\n    const row = msg.payload[index];\n    var t = new Date(row[tsField]).valueOf()\n    var i = 0;\n    for (let f = 0; f < fields.length; f++ ) {\n        let field = fields[f];\n        series[f].push({ \"x\": t, \"y\": row[field] })\n    }\n}\n\n\nmsg.payload = [\n    {\n        \"series\": fields,\n        \"data\": series,\n        \"labels\": [\"\"]\n    }\n];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":640,"wires":[["9ea012281f268c03","e9a71972ade69462"]]},{"id":"9ea012281f268c03","type":"debug","z":"59f913ad10ec391d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":670,"y":640,"wires":[]},{"id":"e9a71972ade69462","type":"ui_chart","z":"59f913ad10ec391d","name":"","group":"c4e018332a1155de","order":4,"width":"6","height":"7","label":"data","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"5","removeOlderPoints":"1000","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":650,"y":700,"wires":[[]]},{"id":"c4e018332a1155de","type":"ui_group","name":"Dashboard","tab":"78a610c83b252fe7","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"78a610c83b252fe7","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

I believe its because my time format is in javascript format.
Though to be fair, I might be completely wrong.

4

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