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: https://github.com/Mikhus/canvas-gauges/issues/248#issuecomment-1943632686

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