jqxBarGauge not updating

[IanAberParticipant]

I have a page with four jqxBarGauge instances. Three have two bars and one has three. The page is updaed by a websocket every second. On load of the page everything works as expected and for the first couple of updates it works correctly but hen the gauges stop adjusting their display. If I hove over the bar I the popup tool tip shows the correct value last set but he bar and label are incorrect.

An exaample of one gauge being set up is…

    $("#LoadTemp").jqxBarGauge({
        width: controlsWidth,
        height: controlsHeight,
        values: [0.0, 0.0],
        min: 0,
        max: 60,
        animationDuration: 250,
        startAngle: 265,
        endAngle: 275,
        title:	{
            text: 'Load Temperatures',
            font: { size: 12, color: 'black', weight: 'bold', family:"Segoi-UI"},
            margin: { top: 0, bottom: 2, left: 0, right: 0},
            verticalAlignment: 'bottom'
        },
        labels: {
            font: {size: 8,},
            precision: 1,
        },
        colorScheme: 'customColors',
        customColorScheme: { name: 'customColors', colors: ['#A60000', '#820033'] },
        tooltip: {visible: true,
            precision: 1,
            formatFunction: function (value, index){
                switch(index)
                {
                    case 0 : return("Inlet = " + value);
                    default : return ("Outlet = " + value);
                }
            }}
    });

I am using jQuery to update the gauges only calling the gauge to update if there was a change in the data

    Control = $("#LoadTemp");
    ControlVals = Control.val();
    if (ControlVals[0] != data.LoadTempIn || ControlVals[1] != data.LoadTempOut) {
        Control.jqxBarGauge('val', [data.LoadTempIn, data.LoadTempOut]);
    }

[svetoslav_borislavovParticipant]

Hi,

I have tried to reproduce the problem but without success.
Here is a working version: http://jsfiddle.net/94sphuyr/1/
The values are updated each second.
You may try to refresh the gauge but the animation will change as the value will be set from zero to the value, not from the old value to the new one.
Can you please try sending us an example of the demo?

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[IanAberParticipant]

go to http://cedartechnology.duckdns.org:28080. This is the page I am having trouble with. The gauges should update every second.

If you hover over a bar on one of the bar gauges the tool tip will show you the current value but after a couple of updates the bar is no longer redrawn and the label is not updated. The tooltip is always correct.

[IanAberParticipant]

I changed the code so that instead of updating the gauges direclty from the websocket handler they are updated by a timer from the main window. The time runs every second and the data is updated independantly from the websocket. This seems to have fixed the issue, I think.

[IanAberParticipant]

Darn! I spoke too soon. That did not fix the problem.

[svetoslav_borislavovParticipant]

Hi,

I can see that you are using an old version of jQWidgets, may you update to the latest one?

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[IanAberParticipant]

I just downloaded and installed the latest version. I updated the WEB site so these files should now be version 16.0.0. It is still stopping. They don’t all stop at the same time and in fact some of them never stop.

[svetoslav_borislavovParticipant]

Hi,

I have found that the changes in the values are too small and the updates are too frequent.
You have two options: set the animationDuration to 0 or update the values every 3 seconds or 2 seconds.
Here is an example with animationDuration set to 0:
http://jsfiddle.net/dshpof7L/1/

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[IanAberParticipant]

Many thanks. I will make some changes and check it out.

[Author]

Posts