# Ui-template with canvas gauge

**URL:** <https://discourse.nodered.org/t/ui-template-with-canvas-gauge/27620>\
**Category:** Dashboard\
**Created:** [1 June 2020 12:27 UTC](https://discourse.nodered.org/t/ui-template-with-canvas-gauge/27620 "2020-06-01T12:27:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hermann](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hermann/32/23569_2.png) [@Hermann](https://discourse.nodered.org/u/Hermann)\
**Post date:** [1 June 2020 12:27 UTC](https://discourse.nodered.org/t/ui-template-with-canvas-gauge/27620/1 "2020-06-01T12:27:43Z")

</div>

Hi there,  
I tried to activate a canvas-gauge with the ui-template node. Unfortunately, I can't get it to work. The only result ist the random data generated by the function node written to the dashboard tab. This is the flow I've written so far:

```auto
[{"id":"580eac2e.847d74","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"51991bab.e88114","type":"ui_template","z":"580eac2e.847d74","group":"f8356faf.c875f","name":"Gauge","order":8,"width":"4","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>\n\n<script src=\"/home/hermann/.node-red/gauge.min.js\"></script>\n\n<canvas id=\"test\" data-type=\"radial-gauge\"></canvas>\n\n<script>\n(function(scope){\n var gauge = new RadialGauge({\n renderTo: 'test',\n }).draw();\n \n scope.$watch('msg', function(msg){\n if(msg){\n gauge.setValue(msg.payload);\n gauge.draw();\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":650,"y":140,"wires":[[]]},{"id":"f1e8783b.20b198","type":"function","z":"580eac2e.847d74","name":"randomData_0..100","func":"msg.payload = Math.round(Math.random()*100);\nreturn msg;","outputs":1,"noerr":0,"x":440,"y":140,"wires":[["51991bab.e88114"]]},{"id":"517074b4.f8c0ec","type":"inject","z":"580eac2e.847d74","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":140,"wires":[["f1e8783b.20b198"]]},{"id":"f8356faf.c875f","type":"ui_group","z":"","name":"TemplateTest","tab":"9b58631e.3c5a3","order":1,"disp":true,"width":"6","collapse":false},{"id":"9b58631e.3c5a3","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

```

I do not even see a gauge, only that number 😒 What am I doing wrong? Hope somebody can give me a hint.

---

<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:** [1 July 2020 12:27 UTC](https://discourse.nodered.org/t/ui-template-with-canvas-gauge/27620/2 "2020-07-01T12:27:45Z")

</div>

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