@jkandasa said:
gauge.set(parseFloat(${temperatureSen.value}));
Solution was little more complicated:
<div id="wrapper" style="text-align: center">
<canvas id="my-gauge-${uuid}" style="display: inline-block;"></canvas>
<div style="font-size:21px" id="textfield--${uuid}"></div>
</div>
<script>
var CustomTextRenderer = function(el){
this.el = el;
this.render = function(gauge) {
this.el.innerHTML = gauge.displayedValue.toPrecision(3);
}
}
CustomTextRenderer.prototype = new TextRenderer();
var cs = new CustomTextRenderer(document.getElementById("textfield--${uuid}"));
var opts = {
lines: 32,
angle: 0,
lineWidth: 0.24,
pointer: {
length: 0.9,
strokeWidth: 0.035,
color: '#000066'
},
limitMax: 'false',
percentColors: [[0.0, "#2B31CF" ], [0.60, "#37CF32"], [1.0, "#ff0000"]],
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('my-gauge-${uuid}');
var gauge = new Gauge(target).setOptions(opts);
gauge.animationSpeed = 3;
gauge.maxValue = 40.0;
gauge.setMinValue(-30.0);
gauge.setTextField(new CustomTextRenderer(document.getElementById("textfield--${uuid}")))
gauge.set(${temperatureSen.value});
</script>