# Questions to 'charts' in UIBUILDER
**URL:** https://discourse.nodered.org/t/questions-to-charts-in-uibuilder/88562
**Category:** General
**Tags:** uibuilder
**Created:** [8 June 2024 15:05 UTC](https://discourse.nodered.org/t/questions-to-charts-in-uibuilder/88562 "2024-06-08T15:05:36Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@GretaC](https://discourse.nodered.org/u/GretaC)
#### Post date: [8 June 2024 15:05 UTC](https://discourse.nodered.org/t/questions-to-charts-in-uibuilder/88562/1 "2024-06-08T15:05:36Z")
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.
```auto
[
{
"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": "\n\n\n\n \n My Chart\n\n \n \n\n \n \n \n\n\n\n
Chart Example
\n \n \n \n\n\n",
"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 '\\n \n \n \n \n\n\n\n