Update gauge value problem

[ICFParticipant]

Hi,

I have the following problem with the JqxGauge plug-in.

I inserted a button to update the value feature, but both the animation is not running and the value text shows the sum of the old and the number to get the new value. For example:

If I have a value of 3 and I insert a value of 6, the new value is going to be 33 (3+3=6)
If I have a value of 7 and I insert a value of 2, the new value is going to be 75 (7-5=2)

My code is:

JS:

<link href=”informacion.css” rel=”stylesheet” type=”text/css” \>
<link rel=”stylesheet” href=”../Librerias/jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script src=”../Librerias/jquery.js”></script>
<script src=”../Librerias/jquery.colorbox.js”></script>
<script src=”../Librerias/EstadoReloj.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets//jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets//jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets//jqwidgets/jqxgauge.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets//jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets//jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets//jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”../Librerias/jqwidgets//jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#gaugeContainer’).jqxGauge({
ranges: [{ startValue: 0, endValue: 2, style: { fill: ‘red’, stroke: ‘red’ }, endWidth: 5, startWidth: 1 },
{ startValue: 2, endValue: 3, style: { fill: ‘orange’, stroke: ‘orange’ }, endWidth: 10, startWidth: 5 },
{ startValue: 3, endValue: 5, style: { fill: ‘#8BAC00’, stroke: ‘#8BAC00’ }, endWidth: 13, startWidth: 10 },
{ startValue: 5, endValue: 10, style: { fill: ‘#339933’, stroke: ‘#339933’ }, endWidth: 16, startWidth: 13 }],
ticksMinor: { interval: 0.5, size: ‘5%’ },
ticksMajor: { interval: 1, size: ‘9%’ },
value: 0,
colorScheme: ‘scheme05’,
animationDuration: 1200,
min:0,
max:10,
labels: { interval: 1}
});
$(‘#gaugeContainer’).on(‘valueChanging’, function (e) {
$(‘#gaugeValue’).html(‘COP ‘ + e.args.value);
});

});

$(document).on(‘click’,’#COP’, function(){
var valor = $(“#COPval”).val();
$(“#gaugeContainer”).jqxGauge(‘setValue’, valor);;
})
</script>

HTML:

<div id=”Eficiencia” style=”padding:10px; background:#fff; width:auto; height:auto; overflow:hidden;”>
<div style=”float: left;” id=”gaugeContainer”></div>
<div id=”gaugeValue” style=”position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;”></div>
<input type=”number” id=”COPval”>
<input type=”button” id=”COP” value=”Enviar”>
</div>

CSS:

#gaugeValue {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
background-image: -o-linear-gradient(#fafafa, #f3f3f3);
background-image: -ms-linear-gradient(#fafafa, #f3f3f3);
background-image: linear-gradient(#fafafa, #f3f3f3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
padding: 10px;
}

I really look forward to hearing a solution soon! Thank you in advance!
Iago

[Peter StoevKeymaster]

Hi ICF,

Gauge’s Value should be Number, not String.

Best Regards,
Peter Stoev

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

[ICFParticipant]

Hi Peter,

I added

parseInt(valor, 10);

to my code

so now it is:

$(document).on(‘click’,’#COP’, function(){
var valor = $(“#COPval”).val();
parseInt(valor, 10);
$(“#gaugeContainer”).jqxGauge(‘setValue’, valor);;
})

But still not working

Regards
Iago

[ICFParticipant]

Ok I changed the code to:

$(document).on(‘click’,’#COP’, function(){
var val = $(“#COPval”).val();
var valor = parseInt(val);
$(“#gaugeContainer”).jqxGauge(‘value’, valor);

And works fine!

Thanks!

[Author]

Posts