# Gauge.js library & Node-Red

**URL:** <https://discourse.nodered.org/t/gauge-js-library-node-red/49449>\
**Category:** Dashboard\
**Created:** [7 August 2021 15:01 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449 "2021-08-07T15:01:18Z")\
**Posts on this page:** 18\
**Page:** 1

<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:** [7 August 2021 15:01 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/1 "2021-08-07T15:01:18Z")

</div>

I have used **gauge.js** library on a HTML/python project with good results.

How can I now use this library within Node-Red or Node-Red-template?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 August 2021 15:17 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/2 "2021-08-07T15:17:34Z")

</div>

Add the gauge.js to a ui-template set for head, add the Gauge building code to a normal ui-template.

![ppZEpqucQw](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/c/fcaeb8e6b212e3f9feb6b116f960cbc0f3e26e22.gif)

```auto
[{"id":"0181a540cb556a30","type":"ui_template","z":"9af9141769558c7a","group":"dce9e7a2.d20c78","name":"gauge.js","order":6,"width":0,"height":0,"format":"<script>\n(function(){function t(t,i){for(var e in i)m.call(i,e)&&(t[e]=i[e]);function s(){this.constructor=t}return s.prototype=i.prototype,t.prototype=new s,t. __super__ =i.prototype,t}var i,e,s,n,o,p,a,h,r,l,g,c,u,d=[].slice,m={}.hasOwnProperty,x=[].indexOf||function(t){for(var i=0,e=this.length;i<e;i++)if(i in this&&this[i]===t)return i;return-1};function f(t,i){null==t&&(t=!0),this.clear=null==i||i,t&&AnimationUpdater.add(this)}function v(){return v. __super__.constructor.apply(this,arguments)}function y(t,i){this.el=t,this.fractionDigits=i}function V(t,i){if(this.elem=t,this.text=null!=i&&i,V. __super__.constructor.call(this),void 0===this.elem)throw new Error(\"The element isn't defined.\");this.value=1*this.elem.innerHTML,this.text&&(this.value=0)}function w(t){if(this.gauge=t,void 0===this.gauge)throw new Error(\"The element isn't defined.\");this.ctx=this.gauge.ctx,this.canvas=this.gauge.canvas,w. __super__.constructor.call(this,!1,!1),this.setOptions()}function S(t){this.elem=t}function M(t){var i,e;this.canvas=t,M. __super__.constructor.call(this),this.percentColors=null,\"undefined\"!=typeof G_vmlCanvasManager&&(this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)),this.ctx=this.canvas.getContext(\"2d\"),i=this.canvas.clientHeight,e=this.canvas.clientWidth,this.canvas.height=i,this.canvas.width=e,this.gp=[new p(this)],this.setOptions()}function C(t){this.canvas=t,C. __super__.constructor.call(this),\"undefined\"!=typeof G_vmlCanvasManager&&(this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)),this.ctx=this.canvas.getContext(\"2d\"),this.setOptions(),this.render()}function _(){return _. __super__.constructor.apply(this,arguments)}!function(){var s,n,t,o,i,e,a;for(t=0,i=(a=[\"ms\",\"moz\",\"webkit\",\"o\"]).length;t<i&&(e=a[t],!window.requestAnimationFrame);t++)window.requestAnimationFrame=window[e+\"RequestAnimationFrame\"],window.cancelAnimationFrame=window[e+\"CancelAnimationFrame\"]||window[e+\"CancelRequestAnimationFrame\"];s=null,o=0,n={},requestAnimationFrame?window.cancelAnimationFrame||(s=window.requestAnimationFrame,window.requestAnimationFrame=function(t,i){var e;return e=++o,s(function(){if(!n[e])return t()},i),e},window.cancelAnimationFrame=function(t){return n[t]=!0}):(window.requestAnimationFrame=function(t,i){var e,s,n,o;return e=(new Date).getTime(),o=Math.max(0,16-(e-n)),s=window.setTimeout(function(){return t(e+o)},o),n=e+o,s},window.cancelAnimationFrame=function(t){return clearTimeout(t)})}(),u=function(t){var i,e;for(t-=3600*(i=Math.floor(t/3600))+60*(e=Math.floor((t-3600*i)/60)),t+=\"\",e+=\"\";e.length<2;)e=\"0\"+e;for(;t.length<2;)t=\"0\"+t;return(i=i?i+\":\":\"\")+e+\":\"+t},g=function(){var t,i,e;return e=(i=1<=arguments.length?d.call(arguments,0):[])[0],t=i[1],r(e.toFixed(t))},c=function(t,i){var e,s,n;for(e in s={},t)m.call(t,e)&&(n=t[e],s[e]=n);for(e in i)m.call(i,e)&&(n=i[e],s[e]=n);return s},r=function(t){var i,e,s,n;for(s=(e=(t+=\"\").split(\".\"))[0],n=\"\",1<e.length&&(n=\".\"+e[1]),i=/(\\d+)(\\d{3})/;i.test(s);)s=s.replace(i,\"$1,$2\");return s+n},l=function(t){return\"#\"===t.charAt(0)?t.substring(1,7):t},f.prototype.animationSpeed=32,f.prototype.update=function(t){var i;return null==t&&(t=!1),!(!t&&this.displayedValue===this.value||(this.ctx&&this.clear&&this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),i=this.value-this.displayedValue,Math.abs(i/this.animationSpeed)<=.001?this.displayedValue=this.value:this.displayedValue=this.displayedValue+i/this.animationSpeed,this.render(),0))},t(v,h=f),v.prototype.displayScale=1,v.prototype.forceUpdate=!0,v.prototype.setTextField=function(t,i){return this.textField=t instanceof a?t:new a(t,i)},v.prototype.setMinValue=function(t,i){var e,s,n,o,a;if(this.minValue=t,null==i&&(i=!0),i){for(this.displayedValue=this.minValue,a=[],s=0,n=(o=this.gp||[]).length;s<n;s++)e=o[s],a.push(e.displayedValue=this.minValue);return a}},v.prototype.setOptions=function(t){return null==t&&(t=null),this.options=c(this.options,t),this.textField&&(this.textField.el.style.fontSize=t.fontSize+\"px\"),.5<this.options.angle&&(this.options.angle=.5),this.configDisplayScale(),this},v.prototype.configDisplayScale=function(){var t,i,e,s,n;return s=this.displayScale,!1===this.options.highDpiSupport?delete this.displayScale:(i=window.devicePixelRatio||1,t=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1,this.displayScale=i/t),this.displayScale!==s&&(n=this.canvas.G __width||this.canvas.width,e=this.canvas.G__ height||this.canvas.height,this.canvas.width=n*this.displayScale,this.canvas.height=e*this.displayScale,this.canvas.style.width=n+\"px\",this.canvas.style.height=e+\"px\",this.canvas.G __width=n,this.canvas.G__ height=e),this},v.prototype.parseValue=function(t){return t=parseFloat(t)||Number(t),isFinite(t)?t:0},s=v,y.prototype.render=function(t){return this.el.innerHTML=g(t.displayedValue,this.fractionDigits)},a=y,t(V,h),V.prototype.displayedValue=0,V.prototype.value=0,V.prototype.setVal=function(t){return this.value=1*t},V.prototype.render=function(){var t;return t=this.text?u(this.displayedValue.toFixed(0)):r(g(this.displayedValue)),this.elem.innerHTML=t},i=V,t(w,h),w.prototype.displayedValue=0,w.prototype.value=0,w.prototype.options={strokeWidth:.035,length:.1,color:\"#000000\",iconPath:null,iconScale:1,iconAngle:0},w.prototype.img=null,w.prototype.setOptions=function(t){if(null==t&&(t=null),this.options=c(this.options,t),this.length=2*this.gauge.radius*this.gauge.options.radiusScale*this.options.length,this.strokeWidth=this.canvas.height*this.options.strokeWidth,this.maxValue=this.gauge.maxValue,this.minValue=this.gauge.minValue,this.animationSpeed=this.gauge.animationSpeed,this.options.angle=this.gauge.options.angle,this.options.iconPath)return this.img=new Image,this.img.src=this.options.iconPath},w.prototype.render=function(){var t,i,e,s,n,o,a,h,r;if(t=this.gauge.getAngle.call(this,this.displayedValue),h=Math.round(this.length*Math.cos(t)),r=Math.round(this.length*Math.sin(t)),o=Math.round(this.strokeWidth*Math.cos(t-Math.PI/2)),a=Math.round(this.strokeWidth*Math.sin(t-Math.PI/2)),i=Math.round(this.strokeWidth*Math.cos(t+Math.PI/2)),e=Math.round(this.strokeWidth*Math.sin(t+Math.PI/2)),this.ctx.beginPath(),this.ctx.fillStyle=this.options.color,this.ctx.arc(0,0,this.strokeWidth,0,2*Math.PI,!1),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(o,a),this.ctx.lineTo(h,r),this.ctx.lineTo(i,e),this.ctx.fill(),this.img)return s=Math.round(this.img.width*this.options.iconScale),n=Math.round(this.img.height*this.options.iconScale),this.ctx.save(),this.ctx.translate(h,r),this.ctx.rotate(t+Math.PI/180*(90+this.options.iconAngle)),this.ctx.drawImage(this.img,-s/2,-n/2,s,n),this.ctx.restore()},p=w,S.prototype.updateValues=function(t){return this.value=t[0],this.maxValue=t[1],this.avgValue=t[2],this.render()},S.prototype.render=function(){var t,i;return this.textField&&this.textField.text(g(this.value)),0===this.maxValue&&(this.maxValue=2*this.avgValue),i=this.value/this.maxValue*100,t=this.avgValue/this.maxValue*100,$(\".bar-value\",this.elem).css({width:i+\"%\"}),$(\".typical-value\",this.elem).css({width:t+\"%\"})},t(M,s),M.prototype.elem=null,M.prototype.value=[20],M.prototype.maxValue=80,M.prototype.minValue=0,M.prototype.displayedAngle=0,M.prototype.displayedValue=0,M.prototype.lineWidth=40,M.prototype.paddingTop=.1,M.prototype.paddingBottom=.1,M.prototype.percentColors=null,M.prototype.options={colorStart:\"#6fadcf\",colorStop:void 0,gradientType:0,strokeColor:\"#e0e0e0\",pointer:{length:.8,strokeWidth:.035,iconScale:1},angle:.15,lineWidth:.44,radiusScale:1,fontSize:40,limitMax:!1,limitMin:!1},M.prototype.setOptions=function(t){var i,e,s,n,o;for(null==t&&(t=null),M. __super__.setOptions.call(this,t),this.configPercentColors(),this.extraPadding=0,this.options.angle<0&&(n=Math.PI*(1+this.options.angle),this.extraPadding=Math.sin(n)),this.availableHeight=this.canvas.height*(1-this.paddingTop-this.paddingBottom),this.lineWidth=this.availableHeight*this.options.lineWidth,this.radius=(this.availableHeight-this.lineWidth/2)/(1+this.extraPadding),this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),e=0,s=(o=this.gp).length;e<s;e++)(i=o[e]).setOptions(this.options.pointer),i.render();return this.render(),this},M.prototype.configPercentColors=function(){var t,i,e,s,n,o,a;if(this.percentColors=null,void 0!==this.options.percentColors){for(this.percentColors=new Array,o=[],e=s=0,n=this.options.percentColors.length-1;0<=n?s<=n:n<=s;e=0<=n?++s:--s)a=parseInt(l(this.options.percentColors[e][1]).substring(0,2),16),i=parseInt(l(this.options.percentColors[e][1]).substring(2,4),16),t=parseInt(l(this.options.percentColors[e][1]).substring(4,6),16),o.push(this.percentColors[e]={pct:this.options.percentColors[e][0],color:{r:a,g:i,b:t}});return o}},M.prototype.set=function(t){var i,e,s,n,o,a,h,r,l;for(t instanceof Array||(t=[t]),e=s=0,h=t.length-1;0<=h?s<=h:h<=s;e=0<=h?++s:--s)t[e]=this.parseValue(t[e]);if(t.length>this.gp.length)for(e=n=0,r=t.length-this.gp.length;0<=r?n<r:r<n;e=0<=r?++n:--n)(i=new p(this)).setOptions(this.options.pointer),this.gp.push(i);else t.length<this.gp.length&&(this.gp=this.gp.slice(this.gp.length-t.length));for(a=e=0,o=t.length;a<o;a++)(l=t[a])>this.maxValue?this.options.limitMax?l=this.maxValue:this.maxValue=l+1:l<this.minValue&&(this.options.limitMin?l=this.minValue:this.minValue=l-1),this.gp[e].value=l,this.gp[e++].setOptions({minValue:this.minValue,maxValue:this.maxValue,angle:this.options.angle});return this.value=Math.max(Math.min(t[t.length-1],this.maxValue),this.minValue),AnimationUpdater.add(this),AnimationUpdater.run(this.forceUpdate),this.forceUpdate=!1},M.prototype.getAngle=function(t){return(1+this.options.angle)*Math.PI+(t-this.minValue)/(this.maxValue-this.minValue)*(1-2*this.options.angle)*Math.PI},M.prototype.getColorForPercentage=function(t,i){var e,s,n,o,a,h,r;if(0===t)e=this.percentColors[0].color;else for(e=this.percentColors[this.percentColors.length-1].color,n=o=0,h=this.percentColors.length-1;0<=h?o<=h:h<=o;n=0<=h?++o:--o)if(t<=this.percentColors[n].pct){e=!0===i?(r=this.percentColors[n-1]||this.percentColors[0],s=this.percentColors[n],a=(t-r.pct)/(s.pct-r.pct),{r:Math.floor(r.color.r*(1-a)+s.color.r*a),g:Math.floor(r.color.g*(1-a)+s.color.g*a),b:Math.floor(r.color.b*(1-a)+s.color.b*a)}):this.percentColors[n].color;break}return\"rgb(\"+[e.r,e.g,e.b].join(\",\")+\")\"},M.prototype.getColorForValue=function(t,i){var e;return e=(t-this.minValue)/(this.maxValue-this.minValue),this.getColorForPercentage(e,i)},M.prototype.renderStaticLabels=function(t,i,e,s){var n,o,a,h,r,l,p,c,u,d;for(this.ctx.save(),this.ctx.translate(i,e),l=/\\d+\\.?\\d?/,r=(n=t.font||\"10px Times\").match(l)[0],c=n.slice(r.length),o=parseFloat(r)*this.displayScale,this.ctx.font=o+c,this.ctx.fillStyle=t.color||\"#000000\",this.ctx.textBaseline=\"bottom\",this.ctx.textAlign=\"center\",a=0,h=(p=t.labels).length;a<h;a++)void 0!==(d=p[a]).label?(!this.options.limitMin||d>=this.minValue)&&(!this.options.limitMax||d<=this.maxValue)&&(r=(n=d.font||t.font).match(l)[0],c=n.slice(r.length),o=parseFloat(r)*this.displayScale,this.ctx.font=o+c,u=this.getAngle(d.label)-3*Math.PI/2,this.ctx.rotate(u),this.ctx.fillText(g(d.label,t.fractionDigits),0,-s-this.lineWidth/2),this.ctx.rotate(-u)):(!this.options.limitMin||d>=this.minValue)&&(!this.options.limitMax||d<=this.maxValue)&&(u=this.getAngle(d)-3*Math.PI/2,this.ctx.rotate(u),this.ctx.fillText(g(d,t.fractionDigits),0,-s-this.lineWidth/2),this.ctx.rotate(-u));return this.ctx.restore()},M.prototype.renderTicks=function(t,i,e,s){var n,o,a,h,r,l,p,c,u,d,g,m,x,f,v,y,V,w,S,M;if(t!=={}){for(l=t.divisions||0,w=t.subDivisions||0,a=t.divColor||\"#fff\",f=t.subColor||\"#fff\",h=t.divLength||.7,y=t.subLength||.2,u=parseFloat(this.maxValue)-parseFloat(this.minValue),d=parseFloat(u)/parseFloat(t.divisions),v=parseFloat(d)/parseFloat(t.subDivisions),n=parseFloat(this.minValue),o=0+v,r=(c=u/400)*(t.divWidth||1),V=c*(t.subWidth||1),m=[],S=p=0,g=l+1;p<g;S=p+=1)this.ctx.lineWidth=this.lineWidth*h,x=this.lineWidth/2*(1-h),M=this.radius*this.options.radiusScale+x,this.ctx.strokeStyle=a,this.ctx.beginPath(),this.ctx.arc(0,0,M,this.getAngle(n-r),this.getAngle(n+r),!1),this.ctx.stroke(),o=n+v,n+=d,S!==t.divisions&&0<w?m.push(function(){var t,i,e;for(e=[],t=0,i=w-1;t<i;t+=1)this.ctx.lineWidth=this.lineWidth*y,x=this.lineWidth/2*(1-y),M=this.radius*this.options.radiusScale+x,this.ctx.strokeStyle=f,this.ctx.beginPath(),this.ctx.arc(0,0,M,this.getAngle(o-V),this.getAngle(o+V),!1),this.ctx.stroke(),e.push(o+=v);return e}.call(this)):m.push(void 0);return m}},M.prototype.render=function(){var t,i,e,s,n,o,a,h,r,l,p,c,u,d,g,m;if(g=this.canvas.width/2,e=this.canvas.height*this.paddingTop+this.availableHeight-(this.radius+this.lineWidth/2)*this.extraPadding,t=this.getAngle(this.displayedValue),this.textField&&this.textField.render(this),this.ctx.lineCap=\"butt\",l=this.radius*this.options.radiusScale,this.options.staticLabels&&this.renderStaticLabels(this.options.staticLabels,g,e,l),this.options.staticZones)for(this.ctx.save(),this.ctx.translate(g,e),this.ctx.lineWidth=this.lineWidth,s=0,o=(p=this.options.staticZones).length;s<o;s++)r=(m=p[s]).min,this.options.limitMin&&r<this.minValue&&(r=this.minValue),h=m.max,this.options.limitMax&&h>this.maxValue&&(h=this.maxValue),d=this.radius*this.options.radiusScale,m.height&&(this.ctx.lineWidth=this.lineWidth*m.height,u=this.lineWidth/2*(m.offset||1-m.height),d=this.radius*this.options.radiusScale+u),this.ctx.strokeStyle=m.strokeStyle,this.ctx.beginPath(),this.ctx.arc(0,0,d,this.getAngle(r),this.getAngle(h),!1),this.ctx.stroke();else void 0!==this.options.customFillStyle?i=this.options.customFillStyle(this):null!==this.percentColors?i=this.getColorForValue(this.displayedValue,this.options.generateGradient):void 0!==this.options.colorStop?((i=0===this.options.gradientType?this.ctx.createRadialGradient(g,e,9,g,e,70):this.ctx.createLinearGradient(0,0,g,0)).addColorStop(0,this.options.colorStart),i.addColorStop(1,this.options.colorStop)):i=this.options.colorStart,this.ctx.strokeStyle=i,this.ctx.beginPath(),this.ctx.arc(g,e,l,(1+this.options.angle)*Math.PI,t,!1),this.ctx.lineWidth=this.lineWidth,this.ctx.stroke(),this.ctx.strokeStyle=this.options.strokeColor,this.ctx.beginPath(),this.ctx.arc(g,e,l,t,(2-this.options.angle)*Math.PI,!1),this.ctx.stroke(),this.ctx.save(),this.ctx.translate(g,e);for(this.options.renderTicks&&this.renderTicks(this.options.renderTicks,g,e,l),this.ctx.restore(),this.ctx.translate(g,e),n=0,a=(c=this.gp).length;n<a;n++)c[n].update(!0);return this.ctx.translate(-g,-e)},o=M,t(C,s),C.prototype.lineWidth=15,C.prototype.displayedValue=0,C.prototype.value=33,C.prototype.maxValue=80,C.prototype.minValue=0,C.prototype.options={lineWidth:.1,colorStart:\"#6f6ea0\",colorStop:\"#c0c0db\",strokeColor:\"#eeeeee\",shadowColor:\"#d5d5d5\",angle:.35,radiusScale:1},C.prototype.getAngle=function(t){return(1-this.options.angle)*Math.PI+(t-this.minValue)/(this.maxValue-this.minValue)*(2+this.options.angle-(1-this.options.angle))*Math.PI},C.prototype.setOptions=function(t){return null==t&&(t=null),C. __super__.setOptions.call(this,t),this.lineWidth=this.canvas.height*this.options.lineWidth,this.radius=this.options.radiusScale*(this.canvas.height/2-this.lineWidth/2),this},C.prototype.set=function(t){return this.value=this.parseValue(t),this.value>this.maxValue?this.options.limitMax?this.value=this.maxValue:this.maxValue=this.value:this.value<this.minValue&&(this.options.limitMin?this.value=this.minValue:this.minValue=this.value),AnimationUpdater.add(this),AnimationUpdater.run(this.forceUpdate),this.forceUpdate=!1},C.prototype.render=function(){var t,i,e,s;return t=this.getAngle(this.displayedValue),s=this.canvas.width/2,e=this.canvas.height/2,this.textField&&this.textField.render(this),(i=this.ctx.createRadialGradient(s,e,39,s,e,70)).addColorStop(0,this.options.colorStart),i.addColorStop(1,this.options.colorStop),this.radius,this.lineWidth,this.radius,this.lineWidth,this.ctx.strokeStyle=this.options.strokeColor,this.ctx.beginPath(),this.ctx.arc(s,e,this.radius,(1-this.options.angle)*Math.PI,(2+this.options.angle)*Math.PI,!1),this.ctx.lineWidth=this.lineWidth,this.ctx.lineCap=\"round\",this.ctx.stroke(),this.ctx.strokeStyle=i,this.ctx.beginPath(),this.ctx.arc(s,e,this.radius,(1-this.options.angle)*Math.PI,t,!1),this.ctx.stroke()},t(_,e=C),_.prototype.strokeGradient=function(t,i,e,s){var n;return(n=this.ctx.createRadialGradient(t,i,e,t,i,s)).addColorStop(0,this.options.shadowColor),n.addColorStop(.12,this.options._orgStrokeColor),n.addColorStop(.88,this.options._orgStrokeColor),n.addColorStop(1,this.options.shadowColor),n},_.prototype.setOptions=function(t){var i,e,s,n;return null==t&&(t=null),_. __super__.setOptions.call(this,t),n=this.canvas.width/2,i=this.canvas.height/2,e=this.radius-this.lineWidth/2,s=this.radius+this.lineWidth/2,this.options._orgStrokeColor=this.options.strokeColor,this.options.strokeColor=this.strokeGradient(n,i,e,s),this},n=_,window.AnimationUpdater={elements:[],animId:null,addAll:function(t){var i,e,s,n;for(n=[],e=0,s=t.length;e<s;e++)i=t[e],n.push(AnimationUpdater.elements.push(i));return n},add:function(t){if(x.call(AnimationUpdater.elements,t)<0)return AnimationUpdater.elements.push(t)},run:function(t){var i,e,s,n,o,a,h;if(null==t&&(t=!1),isFinite(parseFloat(t))||!0===t){for(i=!0,h=[],s=e=0,o=(a=AnimationUpdater.elements).length;e<o;s=++e)a[s].update(!0===t)?i=!1:h.push(s);for(n=h.length-1;0<=n;n+=-1)s=h[n],AnimationUpdater.elements.splice(s,1);return AnimationUpdater.animId=i?null:requestAnimationFrame(AnimationUpdater.run)}if(!1===t)return!0===AnimationUpdater.animId&&cancelAnimationFrame(AnimationUpdater.animId),AnimationUpdater.animId=requestAnimationFrame(AnimationUpdater.run)}},\"function\"==typeof window.define&&null!=window.define.amd?define(function(){return{Gauge:o,Donut:n,BaseDonut:e,TextRenderer:a}}):\"undefined\"!=typeof module&&null!=module.exports?module.exports={Gauge:o,Donut:n,BaseDonut:e,TextRenderer:a}:(window.Gauge=o,window.Donut=n,window.BaseDonut=e,window.TextRenderer=a)}).call(this); \n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":1500,"y":800,"wires":[[]]},{"id":"7fd322ae44092954","type":"ui_template","z":"9af9141769558c7a","group":"dce9e7a2.d20c78","name":"foo gauge","order":7,"width":"9","height":"8","format":"<canvas id=\"foo\">\n\n</canvas>\n\n<script>\nvar opts = {\n angle: 0, // The span of the gauge arc\n lineWidth: 0.32, // The line thickness\n radiusScale: 0.85, // Relative radius\n pointer: {\n length: 0.66, // // Relative to gauge radius\n strokeWidth: 0.057, // The thickness\n color: '#000000' // Fill color\n },\n limitMax: false, // If false, max value increases automatically if value > maxValue\n limitMin: false, // If true, the min value of the gauge will be fixed\n colorStart: '#6FADCF', // Colors\n colorStop: '#8FC0DA', // just experiment with them\n strokeColor: '#E0E0E0', // to see which ones work best for you\n generateGradient: true,\n highDpiSupport: true, // High resolution support\n staticZones: [\n {strokeStyle: \"#F03E3E\", min: 0, max: 130}, // Red from 100 to 130\n {strokeStyle: \"#FFDD00\", min: 130, max: 550}, // Yellow\n {strokeStyle: \"#30B32D\", min: 550, max: 2220}, // Green\n {strokeStyle: \"#FFDD00\", min: 2220, max: 2660}, // Yellow\n {strokeStyle: \"#F03E3E\", min: 2660, max: 3000} // Red\n],\n staticLabels: {\n font: \"10px sans-serif\", // Specifies font\n labels: [0, 130, 550, 2220, 2660, 3000], // Print labels at these values\n color: \"#000000\", // Optional: Label text color\n fractionDigits: 0 // Optional: Numerical precision. 0=round off.\n },\n};\n\nvar target = document.getElementById('foo'); // your canvas element\nvar gauge = new Gauge(target).setOptions(opts); // create sexy gauge!\ngauge.maxValue = 3000; // set max gauge value\ngauge.setMinValue(0); // Prefer setter over gauge.minValue = 0\ngauge.animationSpeed = 50; // set animation speed (32 is default value)\n//gauge.percentColors = [[0.0, \"#a9d70b\"], [0.50, \"#f9c802\"], [1.0, \"#ff0000\"]],\n(function(scope) {\n\n scope.$watch('msg', function(msg) {\n if(msg) {\n if (msg.topic == \"set\") {\n gauge.set(msg.payload); // set actual value\n }\n }\n });\n})(scope);\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1500,"y":840,"wires":[[]]},{"id":"a71899bf716e628e","type":"inject","z":"9af9141769558c7a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"set","payload":"50","payloadType":"num","x":1330,"y":800,"wires":[["7fd322ae44092954"]]},{"id":"d68ce9c08033dc5e","type":"inject","z":"9af9141769558c7a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"set","payload":"700","payloadType":"num","x":1330,"y":840,"wires":[["7fd322ae44092954"]]},{"id":"679930abd3f61438","type":"inject","z":"9af9141769558c7a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"set","payload":"2689","payloadType":"num","x":1340,"y":880,"wires":[["7fd322ae44092954"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","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:** [7 August 2021 16:26 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/3 "2021-08-07T16:26:56Z")

</div>

Hi Steve,  
Great help!  
I would have never made it!  
Many thanks!  
regards Hannes

---

<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:** [7 August 2021 21:26 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/4 "2021-08-07T21:26:02Z")

</div>

@Steve-Mcl If I am understanding this correctly, your example flow should be a simple import and deploy.

But as with other "self contained" JS gauge examples I have been testing, most just show a blank window.

To confirm, there is nothing more that needs to be downloaded and installed for your **gauge.js** example to work?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/34a4163d29bfa53d6d674c89982883cd42e90669.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/65cec6688a35ddca3b479f7948ccb63e6342f70e.png)

And BTW, Yes I have been Googling this and tried a few other (simular) examples like here: [gauge.js](https://bernii.github.io/gauge.js/) with same (blank) results. Most frustrating.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 August 2021 21:40 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/5 "2021-08-07T21:40:42Z")

</div>

> [@Gunner](#):
>
> To confirm, there is nothing more that needs to be downloaded and installed for your **gauge.js** example to work

Correct. Should be import and deploy. Do you see any errors in browser console?

---

<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:** [7 August 2021 22:01 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/6 "2021-08-07T22:01:54Z")

</div>

OK, after disabling every other `index` node (that was set to head) across my flows and resetting to default theme... I can get partial results, at least with this example... still can't get other gauge methods (mentioned in another topic) working.

As for browser console errors... well... looks like that's a yes! But no idea how to interpret them.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/0615de95dac9f888353c5ceca0452c3771e99db5.png)

**EDIT**... OK, I didn't realise none of the `inject` nodes fired on refresh... After triggering one, I now see full results of this gauge... but still all the errors.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b42209606b4b9a807ab13981f3b9a7442765040.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:** [7 August 2021 22:11 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/7 "2021-08-07T22:11:19Z")

</div>

OK, I see many of these errors are referring to other parts of my dashboard... makes sense as it is all one big webpage.

I guess I am just running too many experiments across differing CSS and file/image loading processes.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 August 2021 06:54 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/8 "2021-08-08T06:54:48Z")

</div>

Hi @Gunner,  
When you open the "_Network_" tabsheet in your browser Developer Tools, perhaps you then see (after a refresh) where the 404 is related to...  
Bart

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 August 2021 07:46 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/9 "2021-08-08T07:46:02Z")

</div>

@BartButenaers the 404 is just for an optional “loading” page so is totally normal.

---

<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:** [8 August 2021 08:29 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/10 "2021-08-08T08:29:06Z")

</div>

> [@dceejay](#):
>
> the 404 is just for an optional “loading” page so is totally normal.

So I see... gotta love (node)-red herrings 😆

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/024bfa50a70167f989f012afc964a0cace389e4f.png)

All of the other red highlighted errors seem to be from my four `artless-gauge` nodes. No idea why as they are working just fine, but when I disable them the errors go away. I guess that is another case of "errors safe to ignore" 😇

---

<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:** [8 August 2021 14:36 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/11 "2021-08-08T14:36:54Z")

</div>

Hallo Steve,

I actually used another library on my former project.  
You can find it at Github: [https://github.com/Mikhus/canvas-gauges](https://Gauge.js)

How would you integrate this library into Node-Red.  
Also copy the library into one template  
and then in the second template the options etc. ?

Nice feature is, that you can get radial and linear gauges.  
With linear gauges you get more information on one screen.

[[Examples](https://canvas-gauges.com/documentation/examples/)]

---

<div class="post-metadata">

**Author:** ![Ashok](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Ashok](https://discourse.nodered.org/u/Ashok)\
**Post date:** [9 August 2021 09:21 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/12 "2021-08-09T09:21:57Z")

</div>

@Steve-Mcl Great to see, is it possible to integrate the Modbus data like our existing gauge(data coming from the Modbus TCP node and display a same value through gauge),  
if possible how to integrate, can you help us on the same.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 August 2021 09:56 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/13 "2021-08-09T09:56:50Z")

</div>

On the demo i provided, change the inject nodes to change nodes, set msg.topic to `set` and msg.payload as the modbus value you want to display.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 August 2021 10:15 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/14 "2021-08-09T10:15:26Z")

</div>

The fact you have to ask that question tells me you are a beginner with node red. So I recommend watching this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

---

<div class="post-metadata">

**Author:** ![Ashok](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Ashok](https://discourse.nodered.org/u/Ashok)\
**Post date:** [9 August 2021 10:31 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/15 "2021-08-09T10:31:54Z")

</div>

@Steve-Mcl Many thanks!

---

<div class="post-metadata">

**Author:** ![Ashok](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Ashok](https://discourse.nodered.org/u/Ashok)\
**Post date:** [9 August 2021 10:32 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/16 "2021-08-09T10:32:58Z")

</div>

@Colin yeah sir, i am new to node red the link you shared me was helpful.

---

<div class="post-metadata">

**Author:** ![Ashok](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Ashok](https://discourse.nodered.org/u/Ashok)\
**Post date:** [16 August 2021 10:55 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/17 "2021-08-16T10:55:28Z")

</div>

@Steve-Mcl hi,  
i have 2 things  
1.Modbus data getting Continuously feeding through msg.payload but still Gauge stroke is not moving and not showing exact value.  
2.Second point would be like not able to display a multiple gauges in a single window i was tried to do it in single window but multiple window either one of the gauge only displaying.  
1.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/6/b69d67ca887fa6a64d98f81f9853f4f6b947324b.png)  
2. ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/06df6f9cfa03ff237aa1f7e3bd80a9f67fd77d02.png)

---

<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:** [15 September 2021 20:01 UTC](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/19 "2021-09-15T20:01:54Z")

</div>

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