# Node-RED dashboard chart node with timestamp

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-chart-node-with-timestamp/57460>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, database\
**Created:** [29 January 2022 13:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-node-with-timestamp/57460 "2022-01-29T13:01:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![subwayfootlong](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/subwayfootlong/32/42037_2.png) [@subwayfootlong](https://discourse.nodered.org/u/subwayfootlong)\
**Post date:** [29 January 2022 13:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-node-with-timestamp/57460/1 "2022-01-29T13:01:22Z")

</div>

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

Queried this from the db.

```auto
[{"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](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md) but he doesn't really go in depth with multiple data for time so im quite lost.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 January 2022 13:08 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-node-with-timestamp/57460/2 "2022-01-29T13:08:36Z")

</div>

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...

> [@I need help, chart-ui from select sql server](https://discourse.nodered.org/t/i-need-help-chart-ui-from-select-sql-server/46633/31):
>
> Here is a dynamic solution that works for most SQL data arrays... I have adapted it to show you how it can work for you... [image] [{"id":"a80817a3d567f813","type":"inject","z":"553814a2.1248ec","name":"Fake DB data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"LocalCol\":\"2020-11-18 18:25:48.906\",\"PS3 Output Temp\":21.3},{\"LocalCol\":\"2020-11-18 18:16:23.957\",\"PS3 Output Temp\":21.6},{\"LocalCol\":…

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)

---

<div class="post-metadata">

**Author:** ![subwayfootlong](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/subwayfootlong/32/42037_2.png) [@subwayfootlong](https://discourse.nodered.org/u/subwayfootlong)\
**Post date:** [29 January 2022 13:25 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-node-with-timestamp/57460/3 "2022-01-29T13:25:59Z")

</div>

Ah this works well.

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

```auto
[{"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.

---

<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:** [28 February 2022 13:26 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-node-with-timestamp/57460/4 "2022-02-28T13:26:56Z")

</div>

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