# Another gauge.js library

**URL:** <https://discourse.nodered.org/t/another-gauge-js-library/49535>\
**Category:** Dashboard\
**Created:** [9 August 2021 14:24 UTC](https://discourse.nodered.org/t/another-gauge-js-library/49535 "2021-08-09T14:24:57Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [13 August 2021 22:34 UTC](https://discourse.nodered.org/t/another-gauge-js-library/49535/21 "2021-08-13T22:34:12Z")

</div>

> [@juntiedt](#):
>
> My sample flow

BTW, you have some errant triple backticks at the end of your flow, that may confuse new users trying to import it.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cdb03bc60518db87afa2cbd65c333b69aa281483.png)

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [13 August 2021 22:45 UTC](https://discourse.nodered.org/t/another-gauge-js-library/49535/22 "2021-08-13T22:45:45Z")

</div>

> [@juntiedt](#):
>
> centers a gauge in a template group

> [@Gunner](#):
>
> I could never get that to work

Finally figured this out... between strange ways of formatting the command in some examples (shows error but centering still worked?)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/03485352b8de46a9a9d64da0255c344f995502cc.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4dfa07e03d8791fc03469439d10c9610513fd0a9.png)

My best results was to format the div like this... fore and aft of all other code

```auto
<div style="margin:auto">

<script src="/Canvas-Gauges/gauge.min.js"></script>

<canvas data-type="radial-gauge"
    data-width="300"
.....
    data-value={{msg.payload}}
></canvas>

</div>

```

Meanwhile... interference from code in another other gauge example (in same tab, but different group) was stopping the above codes from working... I figured out the part that was interfering (after posting this) and am now working on eliminating the slider and incorporating payload inject (not going so well ☹ )

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94a1b32014cad65d59684782f8934ff79bebfd14.png)

```auto
[{"id":"7aac70aaf6e1046b","type":"ui_template","z":"8c7dfd6121113522","group":"f9a22db17d48a558","name":"Adjustable gauge with trigger points for label colour change","order":1,"width":8,"height":6,"format":"<style>\n body{ background-color: white; }\n #wrapper{ position:auto; }\n canvas{ position:absolute; left:45px; top:5px;}\n #amount{ position:absolute; left:0px; top:5px; margin-bottom:15px; width:35px; border:0; color:#000000; font-weight:bold; }\n #slider-vertical{ position:absolute; left:13px; top:45px; width:11px; height:210px; border:0px; color:#f6931f; font-weight:bold; }\n</style>\n\n \n<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\" />\n<script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>\n<script src=\"http://code.jquery.com/ui/1.10.3/jquery-ui.js\"></script>\n<script>\n $(function() {\n\n let canvas=document.getElementById(\"canvas\");\n let ctx=canvas.getContext(\"2d\");\n\n let PI=Math.PI;\n let cx=180;\n let cy=210;\n let radius=90;\n let min=0;\n let max=1000;\n let minBound=250;\n let maxBound=750;\n let arcWidth=40;\n let tickWidth=4;\n let tickValue=400;\n let tickColor=\"black\";\n\n $( \"#slider-vertical\" ).slider({\n orientation: \"vertical\",\n range: \"min\",\n min: min,\n max: max,\n value:tickValue,\n slide:function( event, ui ) {\n $( \"#amount\" ).val(ui.value);\n draw(ui.value);\n }\n });\n\n $( \"#amount\" ).val( $( \"#slider-vertical\" ).slider( \"value\" ) );\n\n\n draw(tickValue);\n\n function draw(value){\n tickValue=value;\n tickColor=\"orange\";\n if(tickValue<minBound){tickColor=\"green\";}\n if(tickValue>maxBound){tickColor=\"red\";}\n //\n ctx.clearRect(0,0,canvas.width,canvas.height);\n drawArc();\n drawTick(minBound,\"gray\");\n drawTick(maxBound,\"gray\");\n drawTick(tickValue,tickColor,10);\n drawLabel(minBound,\"gray\",20,18);\n drawLabel(maxBound,\"gray\",20,18);\n drawLabel(tickValue,tickColor,55,24); \n }\n\n function drawArc(){\n ctx.beginPath();\n ctx.arc(cx,cy,radius,0,PI,true);\n ctx.lineWidth=arcWidth;\n ctx.strokeStyle=\"lightgray\";\n ctx.stroke();\n }\n\n function drawTick(tickValue,color,extension){\n let plus=extension||0;\n let angle=PI+tickValue/(max-min)*PI;\n let x1=cx+(radius-arcWidth/2)*Math.cos(angle);\n let y1=cy+(radius-arcWidth/2)*Math.sin(angle);\n let x2=cx+(radius+arcWidth/2+plus)*Math.cos(angle);\n let y2=cy+(radius+arcWidth/2+plus)*Math.sin(angle);\n ctx.beginPath();\n ctx.moveTo(x1,y1);\n ctx.lineTo(x2,y2);\n ctx.lineWidth=tickWidth;\n ctx.strokeStyle=color;\n ctx.stroke();\n }\n\n function drawLabel(tickValue,color,extension,fontsize){\n let angle=PI+tickValue/(max-min)*PI;\n let x=cx+(radius+arcWidth/2+extension)*Math.cos(angle);\n let y=cy+(radius+arcWidth/2+extension)*Math.sin(angle);\n ctx.textAlign=\"center\";\n ctx.fillStyle=color;\n ctx.font=fontsize+\"px arial\";\n ctx.fillText(tickValue,x,y);\n }\n\n }); // end $(function(){});\n</script>\n\n\n<body>\n <div id=\"wrapper\">\n <input type=\"text\" id=\"amount\" />\n <div id=\"slider-vertical\"></div>\n <canvas id=\"canvas\" width=372 height=250></canvas>\n </div>\n</body>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":820,"y":560,"wires":[[]]},{"id":"f9a22db17d48a558","type":"ui_group","name":"Custom Gauge 3","tab":"2deac665c2e9da53","order":8,"disp":true,"width":8,"collapse":false},{"id":"2deac665c2e9da53","type":"ui_tab","name":"Gauges Galore","icon":"data_usage","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [14 August 2021 05:37 UTC](https://discourse.nodered.org/t/another-gauge-js-library/49535/23 "2021-08-14T05:37:45Z")

</div>

> [@Gunner](#):
>
> and incorporating payload inject (not going so well ☹ )

Got it...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94e8a5bbb094929460dc9ce7d9c63fe15b91917b.png)

```auto
[{"id":"62bd02c06586e2a6","type":"ui_template","z":"8c7dfd6121113522","group":"f9a22db17d48a558","name":"Adjustable gauge with trigger points for label colour change","order":1,"width":8,"height":"5","format":"<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\" />\n<script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>\n<script src=\"http://code.jquery.com/ui/1.10.3/jquery-ui.js\"></script>\n\n<div style=\"margin:auto\">\n\n<script>\n $(function() {\n \n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n let tickValue = msg.payload;\n draw(tickValue);\n }\n });\n })(scope);\n \n let canvas=document.getElementById(\"canvas\");\n let ctx=canvas.getContext(\"2d\");\n let PI=Math.PI;\n let cx=180;\n let cy=210;\n let radius=100;\n let min=0;\n let max=100;\n let startBound=0;\n let minBound=25;\n let midBound=50;\n let maxBound=75;\n let endBound=100;\n let arcWidth=40;\n let tickWidth=4;\n let tickColor=\"black\";\n let tickValue=50;\n\n draw(tickValue);\n\n function draw(value){\n tickValue=value;\n tickColor=\"black\";\n if(tickValue<minBound){tickColor=\"green\";}\n if(tickValue>minBound&&tickValue<midBound){tickColor=\"yellow\";}\n if(tickValue>midBound&&tickValue<maxBound){tickColor=\"orange\";}\n if(tickValue>maxBound){tickColor=\"red\";}\n //\n ctx.clearRect(0,0,canvas.width,canvas.height);\n drawArc();\n drawTick(startBound,\"green\");\n drawTick(minBound,\"yellow\");\n drawTick(midBound,\"orange\");\n drawTick(maxBound,\"red\");\n drawTick(endBound,\"red\");\n drawTick(tickValue,tickColor,10);\n drawLabel(startBound,\"gray\",20,18);\n drawLabel(minBound,\"gray\",20,18);\n drawLabel(midBound,\"gray\",20,18);\n drawLabel(maxBound,\"gray\",20,18);\n drawLabel(endBound,\"gray\",20,18);\n drawLabel(tickValue,tickColor,55,24); \n }\n\n function drawArc(){\n ctx.beginPath();\n ctx.arc(cx,cy,radius,0,PI,true);\n ctx.lineWidth=arcWidth;\n ctx.strokeStyle=\"lightgray\";\n ctx.stroke();\n }\n\n function drawTick(tickValue,color,extension){\n let plus=extension||0;\n let angle=PI+tickValue/(max-min)*PI;\n let x1=cx+(radius-arcWidth/2)*Math.cos(angle);\n let y1=cy+(radius-arcWidth/2)*Math.sin(angle);\n let x2=cx+(radius+arcWidth/2+plus)*Math.cos(angle);\n let y2=cy+(radius+arcWidth/2+plus)*Math.sin(angle);\n ctx.beginPath();\n ctx.moveTo(x1,y1);\n ctx.lineTo(x2,y2);\n ctx.lineWidth=tickWidth;\n ctx.strokeStyle=color;\n ctx.stroke();\n }\n\n function drawLabel(tickValue,color,extension,fontsize){\n let angle=PI+tickValue/(max-min)*PI;\n let x=cx+(radius+arcWidth/2+extension)*Math.cos(angle);\n let y=cy+(radius+arcWidth/2+extension)*Math.sin(angle);\n ctx.textAlign=\"center\";\n ctx.fillStyle=color;\n ctx.font=fontsize+\"px arial\";\n ctx.fillText(tickValue,x,y);\n }\n }); // end $(function(){});\n</script>\n\n\n<body>\n <div id=\"wrapper\">\n <canvas id=\"canvas\" width=370 height=210></canvas>\n </div>\n</body>\n\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":660,"wires":[[]]},{"id":"4250dc9e50afa42f","type":"random","z":"8c7dfd6121113522","name":"","low":"0","high":"100","inte":"true","property":"payload","x":340,"y":660,"wires":[["62bd02c06586e2a6"]]},{"id":"b6abc32d4305e190","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"payload"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":190,"y":660,"wires":[["4250dc9e50afa42f"]]},{"id":"f9a22db17d48a558","type":"ui_group","name":"Custom Gauge 3","tab":"2deac665c2e9da53","order":8,"disp":true,"width":8,"collapse":false},{"id":"2deac665c2e9da53","type":"ui_tab","name":"Gauges Galore","icon":"data_usage","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [14 August 2021 07:33 UTC](https://discourse.nodered.org/t/another-gauge-js-library/49535/24 "2021-08-14T07:33:37Z")

</div>

> [@Gunner](#):
>
> BTW, you have some errant triple backticks at the end of your flow, that may confuse new users trying to import it.

I have edited my flow and the guidelines! Thanks for the tip!

I also changed the centering to what you posted above. It works ok.

Many thanks for your input!

---

<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:** [13 September 2021 07:33 UTC](https://discourse.nodered.org/t/another-gauge-js-library/49535/25 "2021-09-13T07:33:49Z")

</div>

Closed on 13 September 2021 07:33 UTC

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

[Previous page](https://discourse.nodered.org/t/another-gauge-js-library/49535.md?page=1)