Chart.js object in <head>

Dashboard
1

I can get a chart.js object to render in the dashboard...However I would like to put it in the section. Is this possible?
Regards

2

Things in the head section don’t render as they are outside the body. You put things in there like functions and css etc

3

Thanks for the response. Maybe I mistakenly called the wrong name. I wanted to put it in the toolbar
image
Since I can add images, text, I assumed I could get a chart on the toolbar

Regards

4

The <head> is not related to the top-bar. The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Even if you can place some stuff to the top bar using the ui_template targeted to the head element, those things will live on their own. Meaning that you can not send any msg to them. But what will the chart do if you can't send msg's to it?

5

Alternatively you can build a page as you wish with u-builder or flex dash, both of which give you much more flexibility and control.

6

Currently in my toolbar I have the following objects where I do send msg's to update the data. For example the lightning alert indicator I change the icon to red if the strike is <25Km and display the distance..

image
image1071×67 8.89 KB

image
image1479×63 9.1 KB

I wanted to put a chart to the left of the lightning detector that would have a histogram count of strike hits for 1, 5, 10,15,30, and 60 minutes. Something very small like:
image

Here is my test flow where I put the data in a group on the body.

[{"id":"34cdee2792e95917","type":"ui_template","z":"207eeaf2c60df36a","group":"b37a52432d33b509","name":"test","order":4,"width":"6","height":"4","format":"","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":470,"y":300,"wires":[["29fe17e949535a59"]]},{"id":"631723fcdfa58ab9","type":"inject","z":"207eeaf2c60df36a","name":"","props":[{"p":"payload"},{"p":"legend1","v":" # of Votes","vt":"str"},{"p":"title","v":"Lightning Strikes","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[12,19,3,5,2,3]","payloadType":"json","x":130,"y":320,"wires":[["8da5f3d1ce371396","d43d20258e5fabc7","d0cd64cd17df8e4c"]]},{"id":"8da5f3d1ce371396","type":"template","z":"207eeaf2c60df36a","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div class=\"chart-container\" style=\"position: relative; height:10vh; width:10vw,maintainAspectRatio:true\">\n    <canvas id=\"myChart1\"></canvas>\n</div>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n<script>\nnew Chart(document.getElementById(\"myChart1\"), {\n    type: 'bar',\n    data: {\n      labels: ['60', '30', '15', '10', '5', '1'],\n      datasets: [\n        {\n          label: \"Strikes/min\",\n          backgroundColor: \"rgba(38, 91, 95, .5000)\",\n          borderColor: 'rgba(20, 20, 20, .5)',  \n          borderRadius: 7.5,\n          borderWidth: 2,\n          data: [\n            {{payload}}\n\n          ]\n        }      ]\n    },\n    options: {\n       scales: {\n        x:{\n          grid:{\n          drawOnChartArea:false\n          },\n          ticks:{\n            font:{\n              size:8\n            }\n          }\n        },\n        y:{\n          grid:{\n            drawOnChartArea:false\n          },\n          ticks:{\n            font:{\n            size:8\n            }\n          }\n        }\n      },\n      plugins:  {\n       legend: {\n        display: false,\n       labels: {\n        fontColor: 'rgb(255, 99, 132)'\n       }\n      },  //end of legend\n      title: {\n       display: false,\n        text: '{{{payload.title}}}'\n      }, // end of title\n      },\n  }\n});\n\n</script>\n","output":"str","x":320,"y":300,"wires":[["34cdee2792e95917"]]},{"id":"6aa52a794a7301b9","type":"inject","z":"207eeaf2c60df36a","name":"","props":[{"p":"payload"},{"p":"legend1","v":" # of Votes","vt":"str"},{"p":"title","v":"Lightning Strikes","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[12,10,3,5,2,3]","payloadType":"json","x":130,"y":280,"wires":[["8da5f3d1ce371396","d43d20258e5fabc7","d0cd64cd17df8e4c"]]},{"id":"b37a52432d33b509","type":"ui_group","name":"Default","tab":"f2c07438be89993d","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f2c07438be89993d","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
7

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