Injecting data into ui template for use with Chartjs

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

Why not use the ui-chart node?

Try this:

[{"id":"34cdee2792e95917","type":"ui_template","z":"7f16363fe0d29b4f","group":"63b0eac674a63a21","name":"","order":0,"width":"6","height":"4","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":100,"wires":[["29fe17e949535a59"]]},{"id":"631723fcdfa58ab9","type":"inject","z":"7f16363fe0d29b4f","name":"","props":[{"p":"payload"},{"p":"legend1","v":" # of Votes","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[12,19,3,5,2,3]","payloadType":"json","x":250,"y":100,"wires":[["8da5f3d1ce371396"]]},{"id":"29fe17e949535a59","type":"debug","z":"7f16363fe0d29b4f","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":820,"y":100,"wires":[]},{"id":"8da5f3d1ce371396","type":"template","z":"7f16363fe0d29b4f","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<canvas id=\"myChart\"></canvas>\n\n<script>\nnew Chart(document.getElementById(\"myChart\"), {\n    type: 'bar',\n    data: {\n      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n      datasets: [\n        {\n          label: \"# of Votes\",\n          backgroundColor: \"rgba(65, 72, 255, 1.0000)\",\n          borderColor: \"#000\",\n          data: [\n            {{payload}}\n\n          ]\n        }      ]\n    },\n    options: {\n        legend: {\n            display: true,\n            labels: {\n                fontColor: 'rgb(255, 99, 132)'\n            }\n        },\n    title: {\n        display: true,\n        text: '{{{payload.title}}}'\n      }, scales: {\n        yAxes: [{ \n          scaleLabel: {\n            display: true,\n            labelString: \"yAxes\"\n          }\n        }],\n        xAxes: [{ \n          scaleLabel: {\n            display: true,\n            labelString: \"xAxes\"\n          }\n        }]\n      }\n    }\n});\n\n</script>\n","output":"str","x":440,"y":100,"wires":[["34cdee2792e95917","b54cab9d4e24e751"]]},{"id":"b54cab9d4e24e751","type":"debug","z":"7f16363fe0d29b4f","name":"debug 124","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"template","targetType":"msg","statusVal":"","statusType":"auto","x":430,"y":180,"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","order":1,"disabled":false,"hidden":false}]

To answer your 1st question. I plan to use the chart in the toolbar. My goal is to create a bar chart using bins to count lightning strikes per bin interval.

I did not realize that I should have been doing the JavaScript in a function node. If the UI template will allow JavaScript what does the function provide that can not be done in the UI template.

Regards

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