# How can I show the chart from my data?

**URL:** <https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294>\
**Category:** General\
**Created:** [19 June 2023 02:11 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294 "2023-06-19T02:11:44Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 02:11 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/1 "2023-06-19T02:11:44Z")

</div>

Hello, Everyone.

I'm happy to know this amazing forum.

I'm stuck in showing node-red dashboard chart from my mysql database;

Database changed  
mysql\> show tables;  
+------------------------+  
| Tables\_in\_water\_sensor |  
+------------------------+  
| sensor\_data |  
+------------------------+  
1 row in set (0.00 sec)

mysql\> desc sensor\_data;  
+-------------+-------+------+-----+---------+----------------+  
| Field | Type | Null | Key | Default | Extra |  
+-------------+-------+------+-----+---------+----------------+  
| id | int | NO | PRI | NULL | auto\_increment |  
| water\_level | float | YES | | NULL | |  
| date | date | YES | | NULL | |  
+-------------+-------+------+-----+---------+----------------+  
3 rows in set (0.03 sec)

mysql\> select \* from sensor\_data;  
+----+-------------+------------+  
| id | water\_level | date |  
+----+-------------+------------+  
| 1 | 12.5 | 2023-06-01 |  
| 2 | 13.2 | 2023-06-02 |  
| 3 | 11.8 | 2023-06-03 |  
| 4 | 10.3 | 2023-06-04 |  
| 5 | 12.1 | 2023-06-05 |

function node code

```auto
let labels = [];
let data = [];

msg.payload.forEach(row => {
    labels.push(row.date);
    // console.log(`row.date ${row.date.toString()}`);
    data.push(row.water_level);
});

msg.payload = [
    {
        series: ['Water Level'],
        data: [{
            x: labels,
            y: data.slice(0, labels.length)
        }],
        labels: labels
    }
];

return msg;

```

flow json

```auto
[
    {
        "id": "bad3255e28febdae",
        "type": "tab",
        "label": "db",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "9d6acaa2d2ed70c7",
        "type": "mysql",
        "z": "bad3255e28febdae",
        "mydb": "5909f0fde201f313",
        "name": "",
        "x": 300,
        "y": 180,
        "wires": [
            [
                "e07ba751b59c0f58"
            ]
        ]
    },
    {
        "id": "7264023da74a4a8c",
        "type": "debug",
        "z": "bad3255e28febdae",
        "name": "debug 46",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 780,
        "y": 200,
        "wires": []
    },
    {
        "id": "fd3e944368c16007",
        "type": "inject",
        "z": "bad3255e28febdae",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "SELECT * FROM sensor_data",
        "payload": "",
        "payloadType": "date",
        "x": 120,
        "y": 180,
        "wires": [
            [
                "9d6acaa2d2ed70c7"
            ]
        ]
    },
    {
        "id": "e07ba751b59c0f58",
        "type": "function",
        "z": "bad3255e28febdae",
        "name": "function 19",
        "func": "let labels = [];\nlet data = [];\n\nmsg.payload.forEach(row => {\n labels.push(row.date);\n // console.log(`row.date ${row.date.toString()}`);\n data.push(row.water_level);\n});\n\nmsg.payload = [\n {\n series: ['Water Level'],\n // data: [{\n // x: labels,\n // y: data.slice(0, labels.length)\n // }],\n labels: labels\n }\n];\n\n// console.log(`labels.length : ${labels.length}`);\n// console.log(`data.length : ${data.length}`);\n// for (var i = 0; i < data.length; i++)\n// {\n// console.log(data[i]);\n// node.send({ payload: data[i] });\n// }\n\n// console.dir(msg);\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 550,
        "y": 280,
        "wires": [
            [
                "7264023da74a4a8c",
                "a4cf520cba4c62af"
            ]
        ]
    },
    {
        "id": "a4cf520cba4c62af",
        "type": "ui_chart",
        "z": "bad3255e28febdae",
        "name": "",
        "group": "aa8eec0d5014b069",
        "order": 1,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "0",
        "ymax": "50",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "className": "",
        "x": 790,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "5909f0fde201f313",
        "type": "MySQLdatabase",
        "name": "",
        "host": "127.0.0.1",
        "port": "3306",
        "db": "water_sensor",
        "tz": "",
        "charset": "UTF8"
    },
    {
        "id": "aa8eec0d5014b069",
        "type": "ui_group",
        "name": "second",
        "tab": "4f903fa3c7ed98d8",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "4f903fa3c7ed98d8",
        "type": "ui_tab",
        "name": "Dashboard2",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9fcc2dc61e4f23ea53a86089af508cb6cd8a2bf9.png)

Thank you.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 June 2023 04:49 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/2 "2023-06-19T04:49:47Z")

</div>

can you connect a debug node to the 'water\_sensor' mysql node and copy paste the output here ?

meanwhile, you can also check here

> [@Problem getting data from mysql db to line chart](https://discourse.nodered.org/t/problem-getting-data-from-mysql-db-to-line-chart/67973):
>
> Hi! Im a beginner and still learning NodeRed. I have browsed through the forums to try to find information. However Im stuck. I have a table in the database that I want to pull some data from. each line from the database query looks like this: time: "2022-09-20T07:58:55.000Z" outdoortemperature: 13 loggedoutdoortemp: 10 What I want the line chart to show is how the two temperatures change and corelate over time. I have created a change node with a J:expression (found that in a tutoria…

---

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 04:52 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/3 "2023-06-19T04:52:35Z")

</div>

Hello, @smanjunath211

Thank you for your support.

```auto
2023. 6. 19. 오후 1:51:26node: debug 46
SELECT * FROM sensor_data : msg : Object
object
_msgid: "d35a8257051c6e35"
payload: array[1]
0: object
series: array[1]
0: "Water Level"
labels: array[45]
[0 … 9]
0: "2023-05-31T15:00:00.000Z"
1: "2023-06-01T15:00:00.000Z"
2: "2023-06-02T15:00:00.000Z"
3: "2023-06-03T15:00:00.000Z"
4: "2023-06-04T15:00:00.000Z"
5: "2023-06-05T15:00:00.000Z"
6: "2023-06-06T15:00:00.000Z"
7: "2023-06-07T15:00:00.000Z"
8: "2023-06-08T15:00:00.000Z"
9: "2023-06-09T15:00:00.000Z"
[10 … 19]
[20 … 29]
[30 … 39]
[40 … 44]
topic: "SELECT * FROM senso

```

Thank you.

---

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 04:54 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/4 "2023-06-19T04:54:16Z")

</div>

Hello,

```auto
2023. 6. 19. 오후 1:53:14node: debug 46
SELECT * FROM sensor_data : msg : Object
object
_msgid: "793c5d04db170b17"
payload: array[1]
0: object
series: array[1]
0: "Water Level"
data: array[1]
0: object
x: array[45]
[0 … 9]
0: "2023-05-31T15:00:00.000Z"
1: "2023-06-01T15:00:00.000Z"
2: "2023-06-02T15:00:00.000Z"
3: "2023-06-03T15:00:00.000Z"
4: "2023-06-04T15:00:00.000Z"
5: "2023-06-05T15:00:00.000Z"
6: "2023-06-06T15:00:00.000Z"
7: "2023-06-07T15:00:00.000Z"
8: "2023-06-08T15:00:00.000Z"
9: "2023-06-09T15:00:00.000Z"
[10 … 19]
10: "2023-06-10T15:00:00.000Z"
11: "2023-06-11T15:00:00.000Z"
12: "2023-06-12T15:00:00.000Z"
13: "2023-06-13T15:00:00.000Z"
14: "2023-06-14T15:00:00.000Z"
15: "2023-06-15T15:00:00.000Z"
16: "2023-06-16T15:00:00.000Z"
17: "2023-06-17T15:00:00.000Z"
18: "2023-06-18T15:00:00.000Z"
19: "2023-06-19T15:00:00.000Z"
[20 … 29]
[30 … 39]
[40 … 44]
y: array[45]
labels: array[45]
[0 … 9]
0: "2023-05-31T15:00:00.000Z"
1: "2023-06-01T15:00:00.000Z"
2: "2023-06-02T15:00:00.000Z"
3: "2023-06-03T15:00:00.000Z"
4: "2023-06-04T15:00:00.000Z"
5: "2023-06-05T15:00:00.000Z"
6: "2023-06-06T15:00:00.000Z"
7: "2023-06-07T15:00:00.000Z"
8: "2023-06-08T15:00:00.000Z"
9: "2023-06-09T15:00:00.000Z"
[10 … 19]
[20 … 29]
[30 … 39]
[40 … 44]
topic: "SELECT * FROM sensor_data"

```

Thank you.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 June 2023 05:05 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/5 "2023-06-19T05:05:58Z")

</div>

connect a new debug node to the mysql node, i think you are giving the output of debug node to the function node

---

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 05:11 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/6 "2023-06-19T05:11:37Z")

</div>

Hello,

```auto
2023. 6. 19. 오후 2:11:06node: debug 57
SELECT * FROM sensor_data : msg.payload : array[45]
array[45]
[0 … 9]
0: object
id: 1
water_level: 12.5
date: "2023-05-31T15:00:00.000Z"
1: object
2: object
3: object
4: object
5: object
6: object
7: object
8: object
9: object
[10 … 19]
10: object
id: 11
water_level: 13.4
date: "2023-06-10T15:00:00.000Z"
11: object
12: object
13: object
14: object

```

Thank you.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 June 2023 05:23 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/7 "2023-06-19T05:23:12Z")

</div>

I am not an expert in writing answers, and the data you provided is not in an usable format. if you could give me sample data, it would be better. sorry if i am misguiding you.

however, try this and see if it works.

```auto
[{"id":"e0d895986048fb46","type":"mysql","z":"370cbf905893daf4","mydb":"c966bba326b387f9","name":"","x":300,"y":180,"wires":[["e93a8de06a8b3c52","3eb465c7a9a238d4"]]},{"id":"ca868da90caccc4a","type":"inject","z":"370cbf905893daf4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"SELECT * FROM sensor_data","payload":"","payloadType":"date","x":120,"y":180,"wires":[["e0d895986048fb46"]]},{"id":"e93a8de06a8b3c52","type":"function","z":"370cbf905893daf4","name":"function 19","func":"let labels = [];\nlet data = [];\n\nmsg.payload.forEach(row => {\n labels.push(row.date);\n // console.log(`row.date ${row.date.toString()}`);\n data.push(row.water_level);\n});\n\nmsg.payload = [\n {\n series: ['Water Level'],\n // data: [{\n // x: labels,\n // y: data.slice(0, labels.length)\n // }],\n labels: labels\n }\n];\n\n// console.log(`labels.length : ${labels.length}`);\n// console.log(`data.length : ${data.length}`);\n// for (var i = 0; i < data.length; i++)\n// {\n// console.log(data[i]);\n// node.send({ payload: data[i] });\n// }\n\n// console.dir(msg);\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":550,"y":280,"wires":[["39c998e474e3ed67"]]},{"id":"3eb465c7a9a238d4","type":"function","z":"370cbf905893daf4","name":"Prepare Bar Graph Data","func":"let mname = \"some series\"\nlet dataC = [[]];\nlet dataLabels = [];\n\nfor (let X in msg.payload) {\n dataLabels[X] = msg.payload[X].date;\n dataC[0][X] = msg.payload[X].water_level;\n}\n\nvar m = {\n \"series\": [{mname}],\n \"data\": dataC,\n \"labels\": dataLabels\n};\n\nreturn { payload: [m] };\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":510,"wires":[["36c29e42700861f5"]]},{"id":"39c998e474e3ed67","type":"debug","z":"370cbf905893daf4","name":"debug 46","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":780,"y":200,"wires":[]},{"id":"36c29e42700861f5","type":"change","z":"370cbf905893daf4","name":"Set Graph Title","rules":[{"t":"set","p":"mname","pt":"msg","to":"'Chart Title'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":510,"wires":[["c46c6d4a554b2165"]]},{"id":"c46c6d4a554b2165","type":"ui_chart","z":"370cbf905893daf4","name":"","group":"aa8eec0d5014b069","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"50","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":880,"y":510,"wires":[[]]},{"id":"c966bba326b387f9","type":"MySQLdatabase","name":"","host":"127.0.0.1","port":"3306","db":"water_sensor","tz":"","charset":"UTF8"},{"id":"aa8eec0d5014b069","type":"ui_group","name":"second","tab":"4f903fa3c7ed98d8","order":2,"disp":true,"width":"20","collapse":false,"className":""},{"id":"4f903fa3c7ed98d8","type":"ui_tab","name":"Dashboard2","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 05:27 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/8 "2023-06-19T05:27:48Z")

</div>

Hello,

Thank you for your support.

It works fine.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bdaca1212a1730f915c28d0d5f7d231279e6121d.png)

Could you tell me what is my mistake more detail?

Thank you.

---

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 05:32 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/9 "2023-06-19T05:32:59Z")

</div>

Hello,

Could you help me wide x - axis in chart on dashboard?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/658339c07f91c917e31fb8b7554f816fc283c146.png)

It grows vertically.  
Don't span widely. it fixed 6 in width.

Thank you.

---

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 05:59 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/10 "2023-06-19T05:59:51Z")

</div>

Hello,

I solved this by myself.

Thank you.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 June 2023 06:04 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/11 "2023-06-19T06:04:12Z")

</div>

> [@mszeta](#):
>
> mistake

the syntax expected by chart node was not correct.

---

<div class="post-metadata">

**Author:** ![mszeta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mszeta/32/99334_2.png) [@mszeta](https://discourse.nodered.org/u/mszeta)\
**Post date:** [19 June 2023 06:06 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/12 "2023-06-19T06:06:14Z")

</div>

Thank you so much.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 June 2023 08:03 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/13 "2023-06-19T08:03:25Z")

</div>

glad we could help.

close the thread if you are satisfied with the solution by marking one of the post as solution.

---

<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:** [18 August 2023 08:04 UTC](https://discourse.nodered.org/t/how-can-i-show-the-chart-from-my-data/79294/14 "2023-08-18T08:04:21Z")

</div>

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