Draw problem after a few value updates

[AtaraHalamish]

I recently updated from v1 to v2.1.7.

I have some gaugaes on a page, updated from PLC values.

I noticed that after a few updates, without me moving the browser window, the gauge is drawn on another part of the screen (the left-top-quarter of the original position) - see screenshot.

How can I avoid it?

[AtaraHalamish]

(using FireFox 117.0 (64-bit))

[marcopiai]

i have the same problem, but only with firefox (now release 118.0.2)
I have solved moving the creation of the gauge in a function with a value parameter for start the needle in the last position and every 5 or 10 second i destroy the gauge and recreate it, preserving the value for mantaining the last value

[marcopiai]

example:
function create_gauge(valuestart){
var GAUGE = new RadialGauge({
renderTo: 'gauge1',
width: 180,
height: 180,
units: '°C',
title: 'Temp',
value: valuestart,
minValue: -10,
maxValue: 60,
ticksAngle: 225,
startAngle: 67.5,
majorTicks: [
'-10','0','10','20','30','40','50','60'
],
minorTicks: 5,
strokeTicks: false,
//barStrokeWidth: 1,
//barWidth:5,
highlights: [
{ from: -10, to: 10, color: 'rgba(0,0,255,.7)' },
{ from: 10, to: 20, color: 'rgba(0,226,255,.8)' },
{ from: 20, to: 34, color: 'rgba(0,255,0,.7)' },
{ from: 34, to: 44, color: 'rgba(255,245,0,.7)' },
{ from: 44, to: 50, color: 'rgba(255,120,0,.8)' },
{ from: 50, to: 60, color: 'rgba(255,0,0,.6)' }
],
colorPlate: '#fff',
colorMajorTicks: '#f5f5f5',
colorMinorTicks: '#ddd',
colorTitle: '#000',
colorUnits: '#000',
colorNumbers: '#000',
colorNeedle: 'rgba(240, 128, 128, 1)',
colorNeedleEnd: 'rgba(255, 160, 122, .9)',
colorBorderOuter:'#fff',
colorBorderOuterEnd:'#fff',
colorBorderMiddle:'#fff',
colorBorderMiddleEnd:'#fff',
colorBorderInner:'#fff',
colorBorderInnerEnd:'#fff',
colorBorderShadow: '#fff',
valueDec:1,
valueInt:1,
fontNumbers: "Verdana",
fontValueStyle: 'italic',
fontNumbersSize: 22,
fontNumbersStyle: 'italic',
fontNumbersWeight: 'bold',
fontTitleSize: 40,
fontUnitsSize: 30,
fontValueSize: 50,
colorValueText: "#000",
colorValueBoxRect: "#fff",
colorValueBoxRectEnd: "#fff",
colorValueBoxBackground: "#fff",
colorValueBoxShadow: false,
colorValueTextShadow: false,
//fontValueSize:30,
valueBox: true,
animationRule: 'linear',
animationDuration: 500
}).draw();
return GAUGE;
}

then add a onload call in body for first draw:
onload="create_gauge(0);"

and in the refresh animation some changes:
// animage all gauges on a page

window.addEventListener('load', function() {
	
	setInterval(function() {
		document.gauges.forEach(function(gauge) {
				var value = gauge.value;
				var new_value = Math.random() *
				(gauge.options.maxValue - gauge.options.minValue) + gauge.options.minValue;
				gauge.destroy();
				var GAUGE_new = create_gauge(value);
				GAUGE_new.value = new_value;
			});
					   
	}, 1000);
	
});

this for me works well
i have also added a counter for refresh the draw only every 10 second

[Strandinator]

Different issue but similar workaround: #248 (comment)

You can use the "render" event to count the render ticks. Then call redraw after a certain limit.