Ui-template with canvas gauge

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:

[{"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 :unamused: What am I doing wrong? Hope somebody can give me a hint.

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