# Injecting data into ui template for use with Chartjs

**URL:** https://discourse.nodered.org/t/injecting-data-into-ui-template-for-use-with-chartjs/71840
**Category:** General
**Created:** [8 December 2022 01:24 UTC](https://discourse.nodered.org/t/injecting-data-into-ui-template-for-use-with-chartjs/71840 "2022-12-08T01:24:31Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [8 December 2022 01:24 UTC](https://discourse.nodered.org/t/injecting-data-into-ui-template-for-use-with-chartjs/71840/1 "2022-12-08T01:24:31Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/4/e4f659090aad98106eecb896ae5d517c15e1315c.png)

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/353cee61aefa385349550067034a1b9f68cc3ab7.png)

and finally the flow:

```auto
[
    {
        "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

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [8 December 2022 12:30 UTC](https://discourse.nodered.org/t/injecting-data-into-ui-template-for-use-with-chartjs/71840/2 "2022-12-08T12:30:04Z")

</div>

Why not use the `ui-chart` node?

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [8 December 2022 13:47 UTC](https://discourse.nodered.org/t/injecting-data-into-ui-template-for-use-with-chartjs/71840/3 "2022-12-08T13:47:13Z")

</div>

Try this:

```auto
[{"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}]

```

---

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [8 December 2022 14:26 UTC](https://discourse.nodered.org/t/injecting-data-into-ui-template-for-use-with-chartjs/71840/4 "2022-12-08T14:26:33Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 December 2022 14:26 UTC](https://discourse.nodered.org/t/injecting-data-into-ui-template-for-use-with-chartjs/71840/5 "2022-12-22T14:26:46Z")

</div>

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