Gauge Value Changing Event

[GDHafeleUKMember]

Hi,

I am using the following piece of code

$(‘#gaugeContainer’).bind(‘valueChanging’, function (e) {
$(‘#gaugeValue’).text(Math.round(e.args.value));
});
$(‘#gaugeContainer’).jqxGauge(‘value’, myVal);

When myVal updates to a higher value ie from 30 to 80 this works fine, but when it goes down 80 to 30 I get a NaN value.
Any ideas why this is happening?

Edit:

Also when the value hasn’t changed, but the page refreshes, the value seems to be multiplied by 10.  So if I have a value of 40 it becomes 400!

Thanks,
GD

[Peter StoevKeymaster]

Hi GD,

Could you please provide the initialization code for your Gauge?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[GDHafeleUKMember]

function DisplayGaugeWidget(gaugeID, KPIName, percentage, green, amber, red, max, redFirst)
{
var labels = { visible: true, position: ‘inside’ },
theme = getTheme();
var myRanges;
if (redFirst == true)
{
myRanges = [{ startValue: 0, endValue: red, style: { fill: ‘#d02841’, stroke: ‘#d02841’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: red, endValue: amber, style: { fill: ‘#FF9A35’, stroke: ‘#FF9A35’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: amber, endValue: max, style: { fill: ‘#02FF17’, stroke: ‘#02FF17’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 }
]
}
else
{
myRanges = [{ startValue: 0, endValue: green, style: { fill: ‘#02FF17’, stroke: ‘#02FF17’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: green, endValue: amber, style: { fill: ‘#FF9A35’, stroke: ‘#FF9A35’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: amber, endValue: max, style: { fill: ‘#d02841’, stroke: ‘#d02841’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 }
]
}
//Create jqxGauge
$(‘#’ + gaugeID).jqxGauge({
ranges: myRanges,
cap: { radius: 0.04 },
style: { stroke: ‘#ffffff’, ‘stroke-width’: ’11px’, fill: ‘#ffffff’ },
animationDuration: 1200,
value: 0,
colorScheme: ‘scheme02’,
labels: labels,
ticksMinor: { interval: 10, size: ‘10%’ },
ticksMajor: { interval: 20, size: ‘15%’ },
min: 0,
max: max,
width: 150,
height: 180
});

$(‘#’ + gaugeID).bind(‘valueChanging’, function (e)
{
var d = e.args.value;
try
{
$(‘#gaugeValue’ + gaugeID).text(e.args.value);
}
catch (err)
{
alert(err);
}
});
$(‘#’ + gaugeID).jqxGauge(‘value’, percentage);

//Initialize the Settings panel.

$(‘#’ + gaugeID).jqxGauge({ border: { showGradient: true, size: ‘5px’, style: { stroke: ‘#898989’ }, visible: false} });
$(‘#’ + gaugeID).jqxGauge({ labels: { position: ‘inside’, interval: 20} });
$(‘#’ + gaugeID).jqxGauge({ pointer: { pointerType: ‘rectangle’, style: { fill: ‘#ff0000’, stroke: ‘#ff0000’ }, length: ‘90%’, width: ‘1%’, visible: true} });

Thanks,
GD
// set gauge’s value.
$(‘#’ + gaugeID).jqxGauge({ ticksDistance: ’15px’ });
$(‘#’ + gaugeID).jqxGauge(‘setValue’, percentage);

$(‘#’ + gaugeID).css(‘width’, ‘180px’);
}

[Peter StoevKeymaster]

Hi GDHafeleUK,

The percentage parameter is a Number or a String like (‘10%’) ? I am asking about that because jqxGauge expects a Number as a Value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[GDHafeleUKMember]

Hi Peter,

Thank you that was the problem when the value updated it was actually a string not an int thank you for your help.

Cheers,
GD

[Author]

Posts