I have been trying to get a simple ui chart to work with chartjs. Here is the flow view:
If I hard code the data values, I can generate the chart. However when I try to inject the data I can not get the chart to render.
Here is the UI template code:
and finally the flow:
[
{
"id": "7f16363fe0d29b4f",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "34cdee2792e95917",
"type": "ui_template",
"z": "7f16363fe0d29b4f",
"group": "63b0eac674a63a21",
"name": "",
"order": 0,
"width": "6",
"height": "4",
"format": "<div>\n <canvas id=\"myChart\"></canvas>\n</div>\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\n const data = msg.payload;\n</script>\n\n<script>\n const ctx = document.getElementById('myChart');\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n datasets: [{\n label: '# of Votes',\n //data: [12, 19, 3, 5, 2, 3],\n data: data,\n borderWidth: 1\n }]\n },\n options: {\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n });\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 580,
"y": 100,
"wires": [
[
"29fe17e949535a59"
]
]
},
{
"id": "631723fcdfa58ab9",
"type": "inject",
"z": "7f16363fe0d29b4f",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "[12,19,3,5,2,3]",
"payloadType": "json",
"x": 430,
"y": 100,
"wires": [
[
"34cdee2792e95917"
]
]
},
{
"id": "29fe17e949535a59",
"type": "debug",
"z": "7f16363fe0d29b4f",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 740,
"y": 100,
"wires": []
},
{
"id": "63b0eac674a63a21",
"type": "ui_group",
"name": "Default",
"tab": "c3b459709757d3ab",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "c3b459709757d3ab",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Any advice is appreciated.
Regards