Sql to ui-chart for temperature

As a newbie I've gone throught many example and I'm still coming up short.
I'm extracting date and temperature (later humidity and BarrPress) into a 3 line chart using ui.

[
    {
        "id": "a4402592cf598c06",
        "type": "group",
        "z": "0c9ff52ffb12dd79",
        "style": {
            "stroke": "#999999",
            "stroke-opacity": "1",
            "fill": "none",
            "fill-opacity": "1",
            "label": true,
            "label-position": "nw",
            "color": "#a4a4a4"
        },
        "nodes": [
            "b5c1e5f33511c385",
            "8c2a4e5ecd6480b9",
            "3286cef8e843ceda",
            "c1df8b4410ac5bdb",
            "952e7af643987cd3",
            "aa9e4cf2be594eb8",
            "183469b5fe81fb17",
            "55a1ee694d1ea654",
            "5da7cdfd7ba6bbb4"
        ],
        "x": 134,
        "y": 199,
        "w": 1332,
        "h": 362
    },
    {
        "id": "b5c1e5f33511c385",
        "type": "function",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "name": "send string to db-WORKS",
        "func": "//var myMsg = msg.payload\nvar myMsgCount = 10\nvar t = \"SELECT  `DateAndTime`, `Temperature` FROM `weather_1` GROUP BY DATE(`DateAndTime`), HOUR(`DateAndTime`) order by DateAndTime DESC LIMIT \" + myMsgCount\n\nreturn {topic:t}\n",
        "outputs": 2,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 630,
        "y": 300,
        "wires": [
            [
                "8c2a4e5ecd6480b9"
            ],
            []
        ]
    },
    {
        "id": "8c2a4e5ecd6480b9",
        "type": "mysql",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "mydb": "ad71bc68fa7f0805",
        "name": "MyTemplog",
        "x": 830,
        "y": 340,
        "wires": [
            [
                "c1df8b4410ac5bdb",
                "aa9e4cf2be594eb8"
            ]
        ]
    },
    {
        "id": "3286cef8e843ceda",
        "type": "comment",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "name": "https://discourse.nodered.org/t/value-from-slider/20757/2",
        "info": "",
        "x": 950,
        "y": 240,
        "wires": []
    },
    {
        "id": "c1df8b4410ac5bdb",
        "type": "debug",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "name": "new test-temp only",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1190,
        "y": 280,
        "wires": []
    },
    {
        "id": "952e7af643987cd3",
        "type": "inject",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "name": "60 minute repeat",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": "5",
        "topic": "75",
        "payload": "75",
        "payloadType": "str",
        "x": 270,
        "y": 240,
        "wires": [
            [
                "b5c1e5f33511c385"
            ]
        ]
    },
    {
        "id": "aa9e4cf2be594eb8",
        "type": "ui-chart",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "group": "8e94577be9e7d37d",
        "name": "Temperature plot 10-30",
        "label": "chart1-temperature",
        "order": 4,
        "chartType": "line",
        "category": "topic",
        "categoryType": "msg",
        "xAxisLabel": "date",
        "xAxisProperty": "",
        "xAxisPropertyType": "timestamp",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "Temperature",
        "yAxisProperty": "payload",
        "yAxisPropertyType": "msg",
        "ymin": "30",
        "ymax": "110",
        "bins": 10,
        "action": "replace",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": "10",
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "x": 1230,
        "y": 360,
        "wires": [
            [
                "5da7cdfd7ba6bbb4"
            ]
        ]
    },
    {
        "id": "183469b5fe81fb17",
        "type": "inject",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "name": "Clear Chart",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 1050,
        "y": 520,
        "wires": [
            [
                "aa9e4cf2be594eb8"
            ]
        ]
    },
    {
        "id": "55a1ee694d1ea654",
        "type": "ui-slider",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "group": "8e94577be9e7d37d",
        "name": "slider-10-30",
        "label": "slider-10-30",
        "tooltip": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "outs": "all",
        "topic": "topic",
        "topicType": "msg",
        "thumbLabel": "true",
        "showTicks": "always",
        "min": "1",
        "max": 10,
        "step": 1,
        "className": "",
        "iconPrepend": "",
        "iconAppend": "",
        "color": "",
        "colorTrack": "",
        "colorThumb": "",
        "x": 1050,
        "y": 480,
        "wires": [
            [
                "aa9e4cf2be594eb8"
            ]
        ]
    },
    {
        "id": "5da7cdfd7ba6bbb4",
        "type": "debug",
        "z": "0c9ff52ffb12dd79",
        "g": "a4402592cf598c06",
        "name": "debug output from chart",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1310,
        "y": 440,
        "wires": []
    },
    {
        "id": "ad71bc68fa7f0805",
        "type": "MySQLdatabase",
        "name": "My Database",
        "host": "127.0.0.1",
        "port": "3306",
        "db": "bme680_v1",
        "tz": "UTC + 4",
        "charset": ""
    },
    {
        "id": "8e94577be9e7d37d",
        "type": "ui-group",
        "name": "group 10-30",
        "page": "4ae37ee26f45a7a6",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "4ae37ee26f45a7a6",
        "type": "ui-page",
        "name": "new chart 10-30",
        "ui": "d65ae8163ef966dd",
        "path": "/page16",
        "icon": "home",
        "layout": "grid",
        "theme": "c2ff5ba1f92a0f0e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "d65ae8163ef966dd",
        "type": "ui-base",
        "name": "Node-red-2",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "c2ff5ba1f92a0f0e",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

The sql will provide hourly readings of temperature however, the chart is blank.
The input to the chart:
0/29/2024, 4:13:13 PMnode: debug output from chartSELECT DateAndTime, Temperature FROM weather_1 GROUP BY DATE(DateAndTime), HOUR(DateAndTime) order by DateAndTime DESC LIMIT 10 : msg.payload : array[10]
array[10]
0: object
DateAndTime: "2024-10-29T16:07:05.000Z"
Temperature: 87.6
1: object
DateAndTime: "2024-10-29T15:07:03.000Z"
Temperature: 87.19
2: object
DateAndTime: "2024-10-29T14:07:04.000Z"
Temperature: 87.12
etc,etc,etc
Any help would be appreciated.
Thanks.

You need to tell the chart what properties to use
e.g.

[{"id":"952e7af643987cd3","type":"inject","z":"d1395164b4eec73e","name":"60 minute repeat","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"5","topic":"","payload":"[{\"DateAndTime\":\"2024-10-29T16:07:05.000Z\",\"Temperature\":87.6},{\"DateAndTime\":\"2024-10-29T15:07:03.000Z\",\"Temperature\":87.19},{\"DateAndTime\":\"2024-10-29T14:07:04.000Z\",\"Temperature\":87.12}]","payloadType":"json","x":570,"y":7760,"wires":[["a2ca0d574662eec3"]]},{"id":"a2ca0d574662eec3","type":"ui-chart","z":"d1395164b4eec73e","group":"8e94577be9e7d37d","name":"Temperature plot 10-30","label":"chart1-temperature","order":1,"chartType":"line","category":"","categoryType":"none","xAxisLabel":"date","xAxisProperty":"DateAndTime","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"Temperature","yAxisProperty":"Temperature","yAxisPropertyType":"property","ymin":"30","ymax":"110","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"10","removeOlderUnit":"86400","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":890,"y":7780,"wires":[["5da7cdfd7ba6bbb4"]]},{"id":"5da7cdfd7ba6bbb4","type":"debug","z":"d1395164b4eec73e","name":"debug output from chart","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1250,"y":7800,"wires":[]},{"id":"8e94577be9e7d37d","type":"ui-group","name":"group 10-30","page":"4ae37ee26f45a7a6","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"4ae37ee26f45a7a6","type":"ui-page","name":"new chart 10-30","ui":"1805777f90e92057","path":"/page16","icon":"home","layout":"grid","theme":"c2ff5ba1f92a0f0e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default"},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

you will need to alter this if you require a 3 line chart, you can add a series to the array, this will identify what is temp, humidity, etc
e.g.

[{"id":"a2ca0d574662eec3","type":"ui-chart","z":"d1395164b4eec73e","group":"8e94577be9e7d37d","name":"Temperature plot 10-30","label":"chart1-temperature","order":1,"chartType":"line","category":"series","categoryType":"property","xAxisLabel":"date","xAxisProperty":"DateAndTime","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"Temperature","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"30","ymax":"110","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"10","removeOlderUnit":"86400","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":890,"y":7780,"wires":[["5da7cdfd7ba6bbb4"]]},{"id":"952e7af643987cd3","type":"inject","z":"d1395164b4eec73e","name":"60 minute repeat","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"5","topic":"","payload":"[{\"DateAndTime\":\"2024-10-29T16:07:05.000Z\",\"value\":87.6,\"series\":\"Temperature\"},{\"DateAndTime\":\"2024-10-29T15:07:03.000Z\",\"value\":87.19,\"series\":\"Temperature\"},{\"DateAndTime\":\"2024-10-29T14:07:04.000Z\",\"value\":87.12,\"series\":\"Temperature\"}]","payloadType":"json","x":570,"y":7760,"wires":[["a2ca0d574662eec3"]]},{"id":"5da7cdfd7ba6bbb4","type":"debug","z":"d1395164b4eec73e","name":"debug output from chart","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1250,"y":7800,"wires":[]},{"id":"8e94577be9e7d37d","type":"ui-group","name":"group 10-30","page":"4ae37ee26f45a7a6","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"4ae37ee26f45a7a6","type":"ui-page","name":"new chart 10-30","ui":"1805777f90e92057","path":"/page16","icon":"home","layout":"grid","theme":"c2ff5ba1f92a0f0e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default"},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

E1cid-great. Thank you. I'm understanding the first solution and see I'm almost there. So close.
I will continue to modify the flow for a better understanding.
Another question about my flow, when using the slider, the chart does not update.
Sending a reset [] I should apply a refresh. Yes.

If you read the sidebar help text you will see msg.action, which you can send Append or Replace. so try sending msg.Action "Replace".
With the slider you and send action append, and form an object of date_time and temperature.

I needed to re-issue a sql statement in a function with updated quantity from db to populate chart with the correct nuber of events. Slider works great. Don't know if this is the preferred way to do it. Now, on to temp, humid and press with slider and chart.
You are a good teacher -thx

Hi @chuckf201 , just an alternative suggestion ... I have my data as well in a SQL database and using Grafana to setup the necessary graphs .. than using the node-red iframe to display the Grafana-Graph (with timeline control) in Node-Red ... see here

Thanks for replying but grafana-graph may be my 3rd step and will explore it after my 2-3 line graph is complete. I can expand my mind then.

1 Like

Still struggling with 3-line chart. Not able to get the js correct.
I'm following all the great examples at https://dashboard-demos.flowfuse.cloud/dashboard/charts-example#advanced-chart-examples All of them inject data from an inject node. The output from sql is:

payload: array[10]
0: object
DateAndTime: "2024-11-02T13:07:04.000Z"
Temperature: 88.43
Humidity: 46.25
BarrPress: 1017.97
1: object
DateAndTime: "2024-11-02T12:07:13.000Z"
Temperature: 87.76
Humidity: 47.45
BarrPress: 1018.85
> Blockquote
My lack of js knowledge is my downfall. 
Here's my flow:

> Blockquote
[
    {
        "id": "3991cb7d55613356",
        "type": "group",
        "z": "6423f856624de623",
        "style": {
            "stroke": "#999999",
            "stroke-opacity": "1",
            "fill": "none",
            "fill-opacity": "1",
            "label": true,
            "label-position": "nw",
            "color": "#a4a4a4"
        },
        "nodes": [
            "bbd4f185c7bce707",
            "82cbc05bc9d64a14",
            "ab7cdec654c07650",
            "a1141a3d58c6ce3e",
            "59a5a969e3ee16f0",
            "0d7164651ac6321e",
            "5d29a61187c387b7",
            "ec444017f9f08a42",
            "fe3569f6a275ad1b",
            "baaed83d387a769e",
            "8989bf9c68e37d17"
        ],
        "x": 254,
        "y": 119,
        "w": 1332,
        "h": 222
    },
    {
        "id": "bbd4f185c7bce707",
        "type": "function",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "send string to db-Testing",
        "func": "var myMsgCount = msg.payload\n//var myMsgCount = 48\n//SELECT ROUND(235.415, 2, 1) AS RoundValue; \n\n//var t = \"SELECT  `DateAndTime`, ROUND(`Temperature`,1) as roundTemp,Humidity,BarrPress  FROM `weather_1` GROUP BY DATE(`DateAndTime`), HOUR(`DateAndTime`) order by DateAndTime DESC LIMIT \" + myMsgCount\n//msg.topic = \"SELECT  `DateAndTime`, ROUND(`Temperature`,1) as roundTemp, ROUND(`Humidity`,1) as roundHumid, ROUND(`BarrPress`,1)as roundBarrPress  FROM `weather_1` GROUP BY DATE(`DateAndTime`), HOUR(`DateAndTime`) order by DateAndTime DESC LIMIT  \" + myMsgCount;\nmsg.topic = \"SELECT  `DateAndTime`,`Temperature`, `Humidity`, `BarrPress`  FROM `weather_1` GROUP BY DATE(`DateAndTime`), HOUR(`DateAndTime`) order by DateAndTime DESC LIMIT  \" + myMsgCount;\n//return {topic:t}\nreturn msg",
        "outputs": 1,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 670,
        "y": 200,
        "wires": [
            [
                "82cbc05bc9d64a14",
                "59a5a969e3ee16f0"
            ]
        ]
    },
    {
        "id": "82cbc05bc9d64a14",
        "type": "mysql",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "mydb": "ad71bc68fa7f0805",
        "name": "MyTemplog",
        "x": 953.3998718261719,
        "y": 193.94000244140625,
        "wires": [
            [
                "0d7164651ac6321e",
                "a1141a3d58c6ce3e"
            ]
        ]
    },
    {
        "id": "ab7cdec654c07650",
        "type": "inject",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "10",
        "payloadType": "num",
        "x": 350,
        "y": 200,
        "wires": [
            [
                "bbd4f185c7bce707"
            ]
        ]
    },
    {
        "id": "a1141a3d58c6ce3e",
        "type": "function",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "****create new payload for multi-values",
        "func": "\n//CMF 11/01/2024\n//https://www.youtube.com/watch?v=VjeOZNmajGk\n\nconst inMsg = msg.payload;\n//ROUND(`Temperature`,1) as roundTemp, ROUND(`Humidity`,1) as roundHumid, ROUND(`BarrPress`,1)as roundBarrPress  FROM `weather_1` GROUP BY DATE(`DateAndTime`), HOUR(`DateAndTime`) order by DateAndTime DESC LIMIT  \" + myMsgCount;\n//return {topic:t}\nvar outObj = [{\n   // mySeries:[\"Weather Values\"],  //Temperature,Humidity,BarrPress\n    myData:[[]],\n    myLabels:[\"\"]\n    }]\n//   fill chart with data\nfor (let item of inMsg){\n    outObj[0].myData[0].push({\n        x:item.DateAndTime,\n        y:item.values\n        \n    })\n\n}\nmsg.payload = outObj;\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1290,
        "y": 180,
        "wires": [
            [
                "5d29a61187c387b7",
                "baaed83d387a769e"
            ]
        ]
    },
    {
        "id": "59a5a969e3ee16f0",
        "type": "debug",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "debug 395",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 933.3998718261719,
        "y": 253.94000244140625,
        "wires": []
    },
    {
        "id": "0d7164651ac6321e",
        "type": "debug",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "debug 396",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1153.3998718261719,
        "y": 253.94000244140625,
        "wires": []
    },
    {
        "id": "5d29a61187c387b7",
        "type": "debug",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "debug 397",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1450,
        "y": 300,
        "wires": []
    },
    {
        "id": "ec444017f9f08a42",
        "type": "comment",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "https://www.youtube.com/watch?v=VjeOZNmajGk",
        "info": "sql to ui-chart example",
        "x": 640,
        "y": 160,
        "wires": []
    },
    {
        "id": "fe3569f6a275ad1b",
        "type": "comment",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "active-multiple",
        "info": "",
        "x": 550,
        "y": 260,
        "wires": []
    },
    {
        "id": "baaed83d387a769e",
        "type": "ui-chart",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "group": "216219a19c75d242",
        "name": "3-values 11-02",
        "label": "3-values 11-02",
        "order": 9007199254740991,
        "chartType": "line",
        "category": "series",
        "categoryType": "msg",
        "xAxisLabel": "",
        "xAxisProperty": "DateAndTime",
        "xAxisPropertyType": "property",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "my test",
        "yAxisProperty": "value",
        "yAxisPropertyType": "property",
        "ymin": "",
        "ymax": "",
        "bins": 10,
        "action": "replace",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": "10",
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "x": 1480,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "8989bf9c68e37d17",
        "type": "inject",
        "z": "6423f856624de623",
        "g": "3991cb7d55613356",
        "name": "clear",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 1230,
        "y": 300,
        "wires": [
            [
                "baaed83d387a769e"
            ]
        ]
    },
    {
        "id": "ad71bc68fa7f0805",
        "type": "MySQLdatabase",
        "name": "My Database",
        "host": "127.0.0.1",
        "port": "3306",
        "db": "bme680_v1",
        "tz": "UTC + 4",
        "charset": ""
    },
    {
        "id": "216219a19c75d242",
        "type": "ui-group",
        "name": "new charts experiment1",
        "page": "1d03d2b963ac3700",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "1d03d2b963ac3700",
        "type": "ui-page",
        "name": "3-value 11-02",
        "ui": "d65ae8163ef966dd",
        "path": "/page17",
        "icon": "home",
        "layout": "grid",
        "theme": "c2ff5ba1f92a0f0e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "d65ae8163ef966dd",
        "type": "ui-base",
        "name": "Node-red-2",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "c2ff5ba1f92a0f0e",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

I think I'm close but...
Thanks in advance.

Since nobody else has your database they can't give a working example from MySQL.
But an SQL query will return an array and one can use an inject node to send the same data

Anyway, from looking at your SQL query, I think your chart node should be configured like this. Three series (as an array) results in 3 lines.

ps In your flow you have the URL of a Youtube video. It is demonstrating creating a chart with the original dashboard, while you seem to be using dashboard v2, the one from Flowfuse.
Charts are very different between the two versions!

You need to convert data to the second example I gave
here is a working function that will do that.

[{"id":"ab7cdec654c07650","type":"inject","z":"d1395164b4eec73e","name":"output from sql","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"DateAndTime\":\"2024-11-02T12:07:13.000Z\",\"Temperature\":87.76,\"Humidity\":47.45,\"BarrPress\":1018.85},{\"DateAndTime\":\"2024-11-02T12:08:13.000Z\",\"Temperature\":87.76,\"Humidity\":47.45,\"BarrPress\":1018.85},{\"DateAndTime\":\"2024-11-02T12:09:13.000Z\",\"Temperature\":87.76,\"Humidity\":47.45,\"BarrPress\":1018.85}]","payloadType":"json","x":860,"y":7720,"wires":[["312af7878a20eebb"]]},{"id":"312af7878a20eebb","type":"function","z":"d1395164b4eec73e","name":"convert sql return ","func":"const output = [];\n\n// loop through each array index\nmsg.payload.forEach(obj => {\n    //save date time\n    let DateAndTime = obj.DateAndTime;\n    //delete date from object\n    delete obj.DateAndTime;\n    //create array of values and keys from object\n    let arr_of_obj = Object.entries(obj);\n    // loop through values and keys\n    arr_of_obj.forEach(arr => {\n        //add object to output array\n        output.push(\n            {\n                DateAndTime: DateAndTime,\n                value: arr[1],\n                series: arr[0]\n            }\n        )\n    })\n})\nmsg.payload = output\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1050,"y":7700,"wires":[["5d29a61187c387b7","baaed83d387a769e"]]},{"id":"5d29a61187c387b7","type":"debug","z":"d1395164b4eec73e","name":"debug 397","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1370,"y":7660,"wires":[]},{"id":"baaed83d387a769e","type":"ui-chart","z":"d1395164b4eec73e","group":"216219a19c75d242","name":"3-values 11-02","label":"3-values 11-02","order":1,"chartType":"line","category":"series","categoryType":"property","xAxisLabel":"","xAxisProperty":"DateAndTime","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"my test","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"10","removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":1380,"y":7760,"wires":[[]]},{"id":"8989bf9c68e37d17","type":"inject","z":"d1395164b4eec73e","name":"clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":1170,"y":7800,"wires":[["baaed83d387a769e"]]},{"id":"216219a19c75d242","type":"ui-group","name":"new charts experiment1","page":"1d03d2b963ac3700","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"1d03d2b963ac3700","type":"ui-page","name":"3-value 11-02","ui":"1805777f90e92057","path":"/page17","icon":"home","layout":"grid","theme":"c2ff5ba1f92a0f0e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default"},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Or more simply follow @jbudd advise, as you can then feed the sql return straight to the chart node.

[{"id":"aa44f89d6984c972","type":"inject","z":"d1395164b4eec73e","name":"output from sql","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"DateAndTime\":\"2024-11-02T12:07:13.000Z\",\"Temperature\":87.76,\"Humidity\":47.45,\"BarrPress\":1018.85},{\"DateAndTime\":\"2024-11-02T12:08:13.000Z\",\"Temperature\":87.76,\"Humidity\":47.45,\"BarrPress\":1018.85},{\"DateAndTime\":\"2024-11-02T12:09:13.000Z\",\"Temperature\":87.76,\"Humidity\":47.45,\"BarrPress\":1018.85}]","payloadType":"json","x":900,"y":7780,"wires":[["056ea64f3ca3cecf"]]},{"id":"056ea64f3ca3cecf","type":"function","z":"d1395164b4eec73e","name":"convert sql return ","func":"msg.series = Object.keys(msg.payload[0]).slice(1);\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1090,"y":7760,"wires":[["2ea92ea73e55151e","736be5bc838b6933"]]},{"id":"2ea92ea73e55151e","type":"debug","z":"d1395164b4eec73e","name":"debug 397","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1410,"y":7720,"wires":[]},{"id":"736be5bc838b6933","type":"ui-chart","z":"d1395164b4eec73e","group":"1102d08d2ebe18d2","name":"3-values 11-02","label":"3-values 11-02","order":1,"chartType":"line","category":"series","categoryType":"msg","xAxisLabel":"","xAxisProperty":"DateAndTime","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"my test","yAxisProperty":"","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"10","removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":1420,"y":7820,"wires":[[]]},{"id":"57161c8aa7f54b92","type":"inject","z":"d1395164b4eec73e","name":"clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":1210,"y":7860,"wires":[["736be5bc838b6933"]]},{"id":"1102d08d2ebe18d2","type":"ui-group","name":"new charts experiment1","page":"2693a6e13851f0fd","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"2693a6e13851f0fd","type":"ui-page","name":"IFM Dashboard","ui":"1805777f90e92057","path":"/IFM","icon":"home","layout":"grid","theme":"576394c7e38e257b","order":2,"className":"","visible":true,"disabled":false},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default"},{"id":"576394c7e38e257b","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

jBudd's solution worked. I did get an error on E1cid 's second example with the following error.
9: object
DateAndTime: "2024-11-03T06:07:04.000Z"
Temperature: 85.08
Humidity: 45.5
BarrPress: 1016.52
topic: "SELECT DateAndTime,Temperature, Humidity, BarrPress FROM weather_1 GROUP BY DATE(DateAndTime), HOUR(DateAndTime) order by DateAndTime DESC LIMIT 10"
_msgid: "2f94f849fac10ee8"
11/3/2024, 3:48:12 PMnode: 3-values 11-03msg : error
"Error: Invalid property expression: zero-length"

I would like to get this solution working as an excersize.
Thanks.

Did you use your OG chart node or the one in my second example?

Does my complete example throw an error, or when you add your sql data?
which node actually throws an error?

E1cid-seems to fail in chart node.

[
    {
        "id": "73b258dd7ab8f80d",
        "type": "function",
        "z": "6423f856624de623",
        "name": "send string to db-Testing",
        "func": "var myMsgCount = msg.payload\nmsg.topic = \"SELECT  `DateAndTime`,`Temperature`, `Humidity`, `BarrPress`  FROM `weather_1` GROUP BY DATE(`DateAndTime`), HOUR(`DateAndTime`) order by DateAndTime DESC LIMIT  \" + myMsgCount;\n//return {topic:t}\nreturn msg",
        "outputs": 1,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 450,
        "y": 380,
        "wires": [
            [
                "bdb3700675160729",
                "7c0bc6ea95d0421a"
            ]
        ]
    },
    {
        "id": "bdb3700675160729",
        "type": "mysql",
        "z": "6423f856624de623",
        "mydb": "ad71bc68fa7f0805",
        "name": "MyTemplog",
        "x": 750,
        "y": 380,
        "wires": [
            [
                "6f253a821b453c25",
                "6236564628cd63c1"
            ]
        ]
    },
    {
        "id": "64194574608e5fc6",
        "type": "inject",
        "z": "6423f856624de623",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "10",
        "payloadType": "num",
        "x": 130,
        "y": 380,
        "wires": [
            [
                "73b258dd7ab8f80d"
            ]
        ]
    },
    {
        "id": "7c0bc6ea95d0421a",
        "type": "debug",
        "z": "6423f856624de623",
        "name": "function output1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1180,
        "y": 320,
        "wires": []
    },
    {
        "id": "6f253a821b453c25",
        "type": "debug",
        "z": "6423f856624de623",
        "name": "db-out",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1190,
        "y": 380,
        "wires": []
    },
    {
        "id": "386c279d3c92b7d4",
        "type": "comment",
        "z": "6423f856624de623",
        "name": "https://www.youtube.com/watch?v=VjeOZNmajGk",
        "info": "sql to ui-chart example",
        "x": 420,
        "y": 340,
        "wires": []
    },
    {
        "id": "aa62edda5cb04d91",
        "type": "ui-chart",
        "z": "6423f856624de623",
        "group": "8dfdac0c662399d0",
        "name": "? 3-values 11-03",
        "label": "3-values 11-03",
        "order": 7,
        "chartType": "line",
        "category": "series",
        "categoryType": "property",
        "xAxisLabel": "",
        "xAxisProperty": "DateAndTime",
        "xAxisPropertyType": "property",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "my test",
        "yAxisProperty": "",
        "yAxisPropertyType": "property",
        "ymin": "",
        "ymax": "",
        "bins": 10,
        "action": "replace",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": "10",
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "x": 1260,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "6236564628cd63c1",
        "type": "function",
        "z": "6423f856624de623",
        "name": "function 15",
        "func": "msg.series = Object.keys(msg.payload[0]).slice(1);\n\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 970,
        "y": 420,
        "wires": [
            [
                "aa62edda5cb04d91",
                "d99a5954b8e0a5d4"
            ]
        ]
    },
    {
        "id": "d99a5954b8e0a5d4",
        "type": "debug",
        "z": "6423f856624de623",
        "name": "debug 395",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1180,
        "y": 500,
        "wires": []
    },
    {
        "id": "ad71bc68fa7f0805",
        "type": "MySQLdatabase",
        "name": "My Database",
        "host": "127.0.0.1",
        "port": "3306",
        "db": "bme680_v1",
        "tz": "UTC + 4",
        "charset": ""
    },
    {
        "id": "8dfdac0c662399d0",
        "type": "ui-group",
        "name": "err",
        "page": "703c4b8db89d5138",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "703c4b8db89d5138",
        "type": "ui-page",
        "name": "Temp,Humid,BarrPress with sliderFIX",
        "ui": "d65ae8163ef966dd",
        "path": "/page19",
        "icon": "home",
        "layout": "grid",
        "theme": "c2ff5ba1f92a0f0e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "d65ae8163ef966dd",
        "type": "ui-base",
        "name": "Node-red-2",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "c2ff5ba1f92a0f0e",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

If you were to copy the output of your db-out node (using the copy value button, not a screen capture) and post it here using the </> button, we could replicate your flow and identify what's going wrong.

Otherwise we have an SQL query and no database to run it on.

I asked three questions you did not answer two of them, I am guessing as you failed to give information needed to be sure.

I think you have not used the chart node i supplied, therefore the config property is not correct. In my example it used msg. series which is an array created by the function node, not key series which would expect msg.series to be a string.

I absolutely used your second example with success.
Thank you for your help

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