My goal was to move from a NR -Desktop chart to an uibuilder chart.
Due to my limited experience in js an nearly no experience in html I was not aware that 'canvas' is one key for my solution.
So I asked AI for a proposal and got the main information. So I succeded, after a week of testing, investigating, frustrating, debugging, ...
You can see the result in the picture and the code for it below.
[
{
"id": "6eb908405022da43",
"type": "inject",
"z": "c441b77c555275d8",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "2",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 250,
"y": 380,
"wires": [
[
"f66abe8c758b6825"
]
]
},
{
"id": "f66abe8c758b6825",
"type": "function",
"z": "c441b77c555275d8",
"name": "Update with random numbers",
"func": "msg.payload = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100];\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 470,
"y": 380,
"wires": [
[
"49ffaa2ec54f8a2f"
]
]
},
{
"id": "49ffaa2ec54f8a2f",
"type": "uibuilder",
"z": "c441b77c555275d8",
"name": "",
"topic": "",
"url": "ui-test-9",
"okToGo": true,
"fwdInMessages": false,
"allowScripts": false,
"allowStyles": false,
"copyIndex": true,
"templateFolder": "blank",
"extTemplate": "",
"showfolder": false,
"reload": false,
"sourceFolder": "src",
"deployedVersion": "6.8.2",
"showMsgUib": false,
"title": "",
"descr": "",
"x": 690,
"y": 380,
"wires": [
[],
[]
]
},
{
"id": "f3cd0e3ff17a3815",
"type": "comment",
"z": "c441b77c555275d8",
"name": "index.html",
"info": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <title>My Chart</title>\n\n <!-- next line missing in AI -->\n <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <link rel=\"stylesheet\" href=\"index.css\">\n <script src=\"index.js\" ></script>\n</head>\n\n<body>\n <h1>Chart Example</h1>\n <canvas id=\"myChart\" width=\"400\" height=\"200\"></canvas>\n <!-- 'defer' missing in next line from AI -->\n <script defer src=\"index.js\"></script>\n</body>\n\n</html>",
"x": 560,
"y": 280,
"wires": []
},
{
"id": "0e67de5647fea05c",
"type": "comment",
"z": "c441b77c555275d8",
"name": "index.js",
"info": "document.addEventListener('DOMContentLoaded', (event) => {\n // Data for the chart\n const data = {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [{\n label: 'My First dataset',\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n data: [65, 59, 80, 81, 56, 55, 40],\n }]\n };\n\n // Configuration for the chart\n const config = {\n type: 'bar',\n data: data,\n options: {\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n };\n\n // Render the chart\n myChart = new Chart(\n document.getElementById('myChart'),\n config\n );\n});\n\n// Listen for messages from Node-RED\nuibuilder.onChange('msg', function (msg) {\n // Update chart data on receiving new messages\n myChart.data.datasets[0].data = msg.payload;\n myChart.update();\n});",
"x": 670,
"y": 300,
"wires": []
},
{
"id": "a1bce227565e2317",
"type": "comment",
"z": "c441b77c555275d8",
"name": "index.css",
"info": "body {\n font-family: Arial, sans-serif;\n margin: 20px;\n}\n\nh1 {\n text-align: center;\n}\n\ncanvas {\n display: block;\n margin: 0 auto;\n}",
"x": 780,
"y": 320,
"wires": []
}
]
Now I want gain a better understanding. During the investigation I got some question marks in my mind, perhaps you can help me:
Question 1:
If I edit 'index.js' I see that several names are 'undefined'. Coming from Pascal and C I would say they are not 'declared'. At least they are not declared in 'index.js'. (see picture)
But it seems to be some kind of 'zombies' 
, because the code is running.
Can anybody tell me how this works?
Question 2:
In AI's proposal 'defer' is missing in '<script defer src="index.js"></script>'.
My understanding is, that 'defer' affects the first time execution of scripts, if it is executed during parsing, or not.
My observation in the debugger is, that 'uibuilder.onChange' is not available if 'defer' is not set. 'Not available' means: I cannot set a break point here. And as a matter of course this part is not executed if the 'injcect' fires.
IF 'defer' is set, everything works fine.
Can anybody tell me?
Question 3:
When inspecting 'myChart' there is no 'data' field in it. My data are in 'myChart.config._config.data.datasets[0].data'.
But the update method 'uibuilder.onChange(...)' has 'myChart.data.datasets[0].data = msg.payload;'.
(the screen shot shows the important part of the object 'myChart'.)
Can anybody tell me the mechanism?
Sorry. I know. It's a lot...
But I learned a lot.