Ui_template and chart.js

Captain_Power · 22 January 2025 14:37

Hello everyone!

I try use chart.js from https://www.chartjs.org/ to draw chart.
I use simple test code:

Code

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {    
    data: {	
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
	type: 'line',
        label: '# of Votes(10)',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 2,
	borderColor: 'red'
      },
	{
	type: 'line',
        label: '# of Votes (100)',
        data: [102, 109, 103, 105, 102, 103],
        borderWidth: 2,
	borderColor: 'blue'
      }]
    },
    options: {
      scales: {
        y1: {
          beginAtZero: true,
	 position: 'left',
                title: {
                text: 'Temperature',
                display: true,
		color: 'red'
                },
                ticks: {
                    color: 'red' // can also use hex color codes
                }	 
        },

      y2: {
        
        position: 'left',
               title: {
                text: 'Humidity',
                display: true,
		color: 'blue'
                },
                ticks: {
                    color: 'blue' // can also use hex color codes
                }	 
      }
	}
    }
  });
</script>

If i save this code in html file, and open in browser, chart look perfect!

But when i try insert this code to ui_template node, i see blank screen.

JSON

[
    {
        "id": "ab27c7f3341270ed",
        "type": "tab",
        "label": "Chart TEST",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "178a68f4776da7c1",
        "type": "ui_template",
        "z": "ab27c7f3341270ed",
        "group": "36c51f57031b4095",
        "name": "test",
        "order": 1,
        "width": 25,
        "height": 16,
        "format": "<canvas id=\"myChart\"></canvas>\n</div>\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\n  const ctx = document.getElementById('myChart');\n  new Chart(ctx, {    \n    data: {\t\n      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n      datasets: [{\n\ttype: 'line',\n        label: '# of Votes(10)',\n        data: [12, 19, 3, 5, 2, 3],\n        borderWidth: 2,\n\tborderColor: 'red'\n      },\n\t{\n\ttype: 'line',\n        label: '# of Votes (100)',\n        data: [102, 109, 103, 105, 102, 103],\n        borderWidth: 2,\n\tborderColor: 'blue'\n      }]\n    },\n    options: {\n      scales: {\n        y1: {\n          beginAtZero: true,\n\t position: 'left',\n                title: {\n                text: 'Temperature',\n                display: true,\n\t\tcolor: 'red'\n                },\n                ticks: {\n                    color: 'red' // can also use hex color codes\n                }\t \n        },\n\n      y2: {\n        \n        position: 'left',\n               title: {\n                text: 'Humidity',\n                display: true,\n\t\tcolor: 'blue'\n                },\n                ticks: {\n                    color: 'blue' // can also use hex color codes\n                }\t \n      }\n\t}\n    }\n  });\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 710,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "cca53acc427e937b",
        "type": "inject",
        "z": "ab27c7f3341270ed",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 520,
        "y": 240,
        "wires": [
            [
                "178a68f4776da7c1"
            ]
        ]
    },
    {
        "id": "496fdc95fddeb1c5",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 2,
        "width": 1,
        "height": 1
    },
    {
        "id": "eae16c90effd51f0",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 3,
        "width": 1,
        "height": 1
    },
    {
        "id": "ceaabb7880848017",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 4,
        "width": 1,
        "height": 1
    },
    {
        "id": "40287d743afe85a5",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 5,
        "width": 1,
        "height": 1
    },
    {
        "id": "5b1ef2891be4233e",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 6,
        "width": 1,
        "height": 1
    },
    {
        "id": "a3ee4c024a8a1918",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 7,
        "width": 1,
        "height": 1
    },
    {
        "id": "915d2422698924a7",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 8,
        "width": 1,
        "height": 1
    },
    {
        "id": "e4abac1f0eed716f",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 9,
        "width": 1,
        "height": 1
    },
    {
        "id": "04fe3abe0aa653f8",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 10,
        "width": 1,
        "height": 1
    },
    {
        "id": "753f70478a9205bc",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 11,
        "width": 1,
        "height": 1
    },
    {
        "id": "17f0d318708d030d",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 12,
        "width": 1,
        "height": 1
    },
    {
        "id": "5de16aae52d36109",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 13,
        "width": 1,
        "height": 1
    },
    {
        "id": "9cd1a0685eb1ef3c",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 14,
        "width": 1,
        "height": 1
    },
    {
        "id": "622aa7c9c2237b9c",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 15,
        "width": 1,
        "height": 1
    },
    {
        "id": "ec7110b3cc7e513a",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 16,
        "width": 1,
        "height": 1
    },
    {
        "id": "f7cb750d81591e0e",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 17,
        "width": 1,
        "height": 1
    },
    {
        "id": "9bc1395a1104547a",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 19,
        "width": 1,
        "height": 1
    },
    {
        "id": "85be989ed6c815c0",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 20,
        "width": 1,
        "height": 1
    },
    {
        "id": "fb97af87a92fbf9d",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 21,
        "width": 1,
        "height": 1
    },
    {
        "id": "8b88a95bfbefd906",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 22,
        "width": 1,
        "height": 1
    },
    {
        "id": "82a3c535641933e1",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 23,
        "width": 1,
        "height": 1
    },
    {
        "id": "613825af9d3c8912",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 24,
        "width": 1,
        "height": 1
    },
    {
        "id": "5033f51e8b5288be",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 25,
        "width": 1,
        "height": 1
    },
    {
        "id": "54108d0af9875f38",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 26,
        "width": 1,
        "height": 1
    },
    {
        "id": "875bdcf3d64b080a",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 27,
        "width": 1,
        "height": 1
    },
    {
        "id": "691399c6dd59e270",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 28,
        "width": 1,
        "height": 1
    },
    {
        "id": "d878c012b296fb43",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 29,
        "width": 1,
        "height": 1
    },
    {
        "id": "30f854b9aeb553ff",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 30,
        "width": 1,
        "height": 1
    },
    {
        "id": "e9d971a2073a0a86",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 31,
        "width": 1,
        "height": 1
    },
    {
        "id": "9046fa92f3c5b75f",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 32,
        "width": 1,
        "height": 1
    },
    {
        "id": "c1adefb4f5da260b",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 33,
        "width": 1,
        "height": 1
    },
    {
        "id": "5d25e0fd0e5c4730",
        "type": "ui_spacer",
        "z": "ab27c7f3341270ed",
        "name": "spacer",
        "group": "36c51f57031b4095",
        "order": 34,
        "width": 1,
        "height": 1
    },
    {
        "id": "36c51f57031b4095",
        "type": "ui_group",
        "name": "Crat_js_test",
        "tab": "4d49a13f86dab141",
        "order": 1,
        "disp": true,
        "width": "26",
        "collapse": false,
        "className": ""
    },
    {
        "id": "4d49a13f86dab141",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

What am I doing wrong?
Thanks for your help!

Buckskin · 22 January 2025 19:33

If you are talking about Dashboard 2 it works for me (the code in a ui_template node - did not try the flow) . Try refreshing the page in the browser

[{"id":"bb42c31bb8319722","type":"ui-template","z":"739e48e889ba0251","group":"44d16b614149039d","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"\n    <div>\n      <canvas id=\"myChart\"></canvas>\n    </div>\n\n\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\n  const ctx = document.getElementById('myChart');\n  new Chart(ctx, {    \n    data: {\t\n      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n      datasets: [{\n\ttype: 'line',\n        label: '# of Votes(10)',\n        data: [12, 19, 3, 5, 2, 3],\n        borderWidth: 2,\n\tborderColor: 'red'\n      },\n\t{\n\ttype: 'line',\n        label: '# of Votes (100)',\n        data: [102, 109, 103, 105, 102, 103],\n        borderWidth: 2,\n\tborderColor: 'blue'\n      }]\n    },\n    options: {\n      scales: {\n        y1: {\n          beginAtZero: true,\n\t position: 'left',\n                title: {\n                text: 'Temperature',\n                display: true,\n\t\tcolor: 'red'\n                },\n                ticks: {\n                    color: 'red' // can also use hex color codes\n                }\t \n        },\n\n      y2: {\n        \n        position: 'left',\n               title: {\n                text: 'Humidity',\n                display: true,\n\t\tcolor: 'blue'\n                },\n                ticks: {\n                    color: 'blue' // can also use hex color codes\n                }\t \n      }\n\t}\n    }\n  });\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1660,"y":620,"wires":[[]]},{"id":"44d16b614149039d","type":"ui-group","name":"Tester","page":"285e57cf621c6550","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"285e57cf621c6550","type":"ui-page","name":"Zigbee Battery Monitor","ui":"80f2e5f9dbf80780","path":"/page12","icon":"home","layout":"grid","theme":"a5bbf4397c8aa75a","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":2,"className":"","visible":"true","disabled":"false"},{"id":"80f2e5f9dbf80780","type":"ui-base","name":"Environment","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"a5bbf4397c8aa75a","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"5px","widgetGap":"12px","density":"default"}}]

hotNipi · 22 January 2025 19:48

It definitely misses one critical step...
The loaded script must be ready to use
See example here

Steve-Mcl · 22 January 2025 19:54

The user posted a flow with the type ui_template so this is dashboard 1. The node types in dashboard 2 use a dash (e.g. ui-template). This was a design choice to avoid node type clashes. Turns out it's a fairly reliable way to infer which it is when the op doesn't use the dashboard-2 tag.

Buckskin · 22 January 2025 20:02

Sorry, missed that. I unfortunately assumed (ass & me) that as they were trying standard code they were using Dashboard 2

Topic		Replies	Views
Chart.js Datalabel Plugin Implementation Problem in ui_template Dashboard	0	2857	19 December 2019
Template Chart is not working in Dashboard-Chartjs Dashboard	3	677	23 December 2020
Injecting data into ui template for use with Chartjs General	4	229	8 December 2022
Using Chart.js to show charts Dashboard	11	2061	30 January 2022
Retaining chart.js data after browser refresh Dashboard dashboard-2	13	127	20 November 2024

Ui_template and chart.js

Related topics