Injecting data into ui template for use with Chartjs

General
1

I have been trying to get a simple ui chart to work with chartjs. Here is the flow view:

image
image853×169 19.2 KB

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:

image
image655×616 46 KB

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

2

Why not use the ui-chart node?

3

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}]
4

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