I got a vertical gauges attached to the german Covid-19 node to display the current numbers on my dashboard. Using the generic template node anf the canvas-gauges library I define all needed config parameters either hard-coded inside the template i.e.
data-title="my text"
or injected by a change node to serve more than one bar chart i.e.
data-title={{msg.payload.titletext}}
Problem is: some injected parameters seem to be ignored while others inject fine. For example to change the overall bar hight on several gauges I would like to inject data-height into the template but then the value is ignored?
Below one defintion of my Covid bar chart:
[{"id":"786866f4.039218","type":"covid-local-incidents","z":"faa2f7e.2516a88","g":"a2bedd7a.753658","name":"COVID-Cux","region":"3352","x":350,"y":140,"wires":[["b7d96d3d0bf9139a","f958b87d.ba1e3"]]},{"id":"b7d96d3d0bf9139a","type":"change","z":"faa2f7e.2516a88","g":"a2bedd7a.753658","name":"Set Gauge Attributes","rules":[{"t":"set","p":"payload.tcolor","pt":"msg","to":"white","tot":"str"},{"t":"set","p":"payload.height","pt":"msg","to":"320","tot":"str"},{"t":"set","p":"payload.value.fontsize","pt":"msg","to":"50","tot":"str"},{"t":"set","p":"payload.value.fontcolor","pt":"msg","to":"#E61919","tot":"str"},{"t":"set","p":"payload.platecolor","pt":"msg","to":"#535353","tot":"str"},{"t":"set","p":"payload.barcolor","pt":"msg","to":"#CE3A0A ","tot":"str"},{"t":"set","p":"payload.maxval","pt":"msg","to":"1500","tot":"str"},{"t":"set","p":"payload.ticks","pt":"msg","to":"0,100,400,600,800,900","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":140,"wires":[["739984144ab73c4d","bb00ca2b66c47dcb"]]},{"id":"bb00ca2b66c47dcb","type":"ui_template","z":"faa2f7e.2516a88","g":"a2bedd7a.753658","group":"2b2afaa.b66a806","name":"Index Niedersachsen","order":2,"width":2,"height":5,"format":"<div style=\"margin:auto\">\n \n<script src=\"/canvas-gauges/gauge.min.js\"></script>\n\n<!-- Injecting linear gauge -->\n<canvas data-type=\"linear-gauge\"\n data-value={{msg.payload.state_7_day_incidents}}\n data-value-box=\"true\"\n data-font-value-style=\"bold\"\n data-font-value-size={{msg.payload.value.fontsize}}\n data-value-dec=\"0\"\n data-color-value-text={{msg.payload.value.fontcolor}}\n data-width=60\n data-height=300\n data-title=\"Nieders.\"\n data-font-title-size=\"40\"\n data-color-title={{msg.payload.tcolor}}\n data-min-value=\"0\"\n data-max-value={{msg.payload.maxval}}\n data-exact-ticks=\"true\"\n data-major-ticks={{msg.payload.ticks}}\n data-color-major-ticks={{msg.payload.tcolor}}\n data-stroke-ticks=\"true\"\n data-font-numbers-size=\"30\"\n data-color-numbers={{msg.payload.tcolor}}\n data-bar-width=35\n data-highlights='[ \n {\"from\": 00, \"to\": 30, \"color\": \"green\"},\n {\"from\": 31, \"to\": 100, \"color\": \"yellow\"},\n {\"from\": 101, \"to\": 200, \"color\": \"red\"}\n ]' \n data-color-plate={{msg.payload.platecolor}}\n data-color-bar-progress={{msg.payload.barcolor}}\n data-border-shadow-width=\"0\"\n data-borders=\"false\"\n data-bar-begin-circle=\"false\"\n data-tick-side=\"left\"\n data-number-side=\"left\"\n data-needle-side=\"left\"\n data-needle-type=\"line\"\n data-needle-width=\"5\"\n data-color-needle=\"#C70039\"\n data-color-needle-end=\"#C70039\"\n data-animation-duration=\"1500\"\n data-animation-rule=\"linear\"\n data-animation-target=\"plate\"\n</canvas>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":990,"y":160,"wires":[[]]},{"id":"2b2afaa.b66a806","type":"ui_group","name":"Corona 7T Inzidenz","tab":"a682838c.8aa3a8","order":3,"disp":true,"width":"6","collapse":true},{"id":"a682838c.8aa3a8","type":"ui_tab","name":"Zuhause","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
The canva-gauges lib otherwise displays fine with my dashboard on an old iPad tablet. I cannot use ui-chart or any other "too modern" front end lib for this widget.
