Hello, I am new to using Raspberry Pi and Node-RED. Currently, I am facing a confusing issue about how to display data from the inject node to the template node so that it can appear as a pie chart on the UI/dashboard. I am using Node-RED Dashboard version 2.0. Can anyone help me?
[
{
"id": "980622ebca896d23",
"type": "ui-template",
"z": "982297f0c4d67695",
"group": "5e9cd1bf9f97ea78",
"page": "",
"ui": "",
"name": "Pie Chart Vue.js",
"order": 5,
"width": "5",
"height": "3",
"format": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Pie Chart Example</title>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n padding: 20px;\n }\n\n .container {\n position: relative;\n display: flex;\n align-items: center;\n padding: 20px;\n border: 2px solid white;\n border-radius: 10px;\n background-color: rgba(0, 0, 0, 0.5);\n }\n\n .leds-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-left: 20px;\n }\n\n .send {\n position: absolute;\n top: 10px;\n left: 10px;\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n text-decoration: none;\n }\n\n .send:hover {\n background-color: #0056b3;\n }\n\n canvas {\n width: 150px !important;\n height: 150px !important;\n }\n\n .led-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .led {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n margin-right: 10px;\n }\n\n .led-red {\n background-color: red;\n }\n\n .led-green {\n background-color: green;\n }\n\n .led-text {\n font-size: 16px;\n color: white;\n }\n </style>\n</head>\n<body>\n <div class=\"container\">\n <button class=\"send\" onclick=\"sendDashboard()\">Home</button>\n <canvas id=\"myPieChart\"></canvas>\n <div class=\"leds-container\">\n <div class=\"led-container\">\n <div class=\"led led-red\"></div>\n <span class=\"led-text\">Not Running</span>\n </div>\n <div class=\"led-container\">\n <div class=\"led led-green\"></div>\n <span class=\"led-text\">Running</span>\n </div>\n </div>\n </div>\n <script>\n function sendDashboard() {\n console.log('Navigating to Dashboard...');\n }\n\n const data = {\n labels: ['Not Running', 'Running'],\n datasets: [{\n label: 'Status',\n data: [30, 70], // Example data (percentage)\n backgroundColor: ['rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)'],\n borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)'],\n borderWidth: 1\n }]\n };\n\n const config = {\n type: 'pie',\n data: data,\n options: {\n responsive: true,\n plugins: {\n legend: { display: false },\n title: { display: false }\n }\n }\n };\n\n const ctx = document.getElementById('myPieChart').getContext('2d');\n const chart = new Chart(ctx, config);\n </script>\n</body>\n</html>\n",
"storeOutMessages": true,
"passthru": false,
"templateScope": "local",
"className": "",
"x": 440,
"y": 1040,
"wires": [
[
"7aafba82adab52cd"
]
]
},
{
"id": "70c02b8d0732ef6a",
"type": "inject",
"z": "982297f0c4d67695",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "Running",
"payload": "58",
"payloadType": "num",
"x": 230,
"y": 1020,
"wires": [
[
"980622ebca896d23"
]
]
},
{
"id": "7aafba82adab52cd",
"type": "debug",
"z": "982297f0c4d67695",
"name": "debug 12",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 620,
"y": 1040,
"wires": []
},
{
"id": "3c3b847ba187e471",
"type": "inject",
"z": "982297f0c4d67695",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "Running",
"payload": "98",
"payloadType": "num",
"x": 230,
"y": 1060,
"wires": [
[
"980622ebca896d23"
]
]
},
{
"id": "5e9cd1bf9f97ea78",
"type": "ui-group",
"name": "led",
"page": "d0621b8f20aee671",
"width": "12",
"height": "11",
"order": 2,
"showTitle": false,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "d0621b8f20aee671",
"type": "ui-page",
"name": "Charts Example",
"ui": "57cca3cf771b1acc",
"path": "/charts-example",
"icon": "chart-box-outline",
"layout": "flex",
"theme": "5075a7d8e4947586",
"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": "57cca3cf771b1acc",
"type": "ui-base",
"name": "dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "none",
"navigationStyle": "none",
"titleBarStyle": "fixed",
"showReconnectNotification": false,
"notificationDisplayTime": "5",
"showDisconnectNotification": false
},
{
"id": "5075a7d8e4947586",
"type": "ui-theme",
"name": "persentase running/not running",
"colors": {
"surface": "#ffffff",
"primary": "#ffffff",
"bgPage": "#ffffff",
"groupBg": "#ffffff",
"groupOutline": "#ffffff"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "default"
}
}
]
icon.