jQuery UI Widgets Forums Gauges and Maps Gauges Update gauge value problem

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  ICF 4 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Update gauge value problem #69753

    ICF
    Participant

    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

    Update gauge value problem #69757

    Peter Stoev
    Keymaster

    Hi ICF,

    Gauge’s Value should be Number, not String.

    Best Regards,
    Peter Stoev

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

    Update gauge value problem #69783

    ICF
    Participant

    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

    Update gauge value problem #69797

    ICF
    Participant

    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!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.