jQuery UI Widgets Forums Gauges and Maps Gauges Guage update issue.

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 9 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Guage update issue. #51095

    mh512
    Participant
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      
        <title id='Description'>guage</title>
        <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxchart.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgauge.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
        <style type="text/css">
        
        </style>
        <script type="text/javascript">
    	
    	var smcvalue;
    	
            $(document).ready(function () {
    		
    		 var source =
    		{
    			 datatype: "json",
    			 datafields: [
    				  { name: 'smc'}
    			],
    			url: 'data.php'
    		};		
                
    			 var dataAdapter = new $.jqx.dataAdapter(source,
    		{
    			autoBind: true,
    			async: false,
    			downloadComplete: function () { },
    			loadComplete: function (records) {
    			
    			var record = records[0];
    			smcvalue = record.smc;
    						
    			
    			},
    			loadError: function () { }
    		});
    		
    		 
    		 
    		
    		
                $('#gaugeContainer').jqxGauge({
                    ranges: [{ startValue: 0, endValue: 250, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 5, startWidth: 1 },
                             { startValue: 250, endValue: 500, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 10, startWidth: 5 },
                             { startValue: 500, endValue: 1000, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 16, startWidth: 13 }],
                    ticksMinor: { interval: 50, size: '5%' },
                    ticksMajor: { interval: 100, size: '9%' },
    				labels: { interval: 150 },
                    value: 0,
    				max: 1000,
    				width: 200,
    				height: 200,
    				caption: { value: 'Soil moisture', position: 'bottom', offset: [0,0], visible: true },
    				colorScheme: 'scheme05',
                    animationDuration: 1200
                });
    
    			 $('#gaugeContainer').on('valueChanging', function (e) {
                  $('#gaugeValue').text(Math.round(e.args.value) + ' au');
                });
    			
    			
    			
                $('#gaugeContainer').val(smcvalue);
    			
    			setInterval(function () {
    			dataAdapter.dataBind();
    		 $("#gaugeContainer").jqxGauge('setValue', smcvalue);
    
    			
    			}, 20000);
      
    
              
            });
        </script>
    </head>
    <body style="background:white;">
        <div id="demoWidget" style="position: relative;">
    	    <div style="float: left;" id="gaugeContainer"></div>
    <div id="gaugeValue" style="position: absolute; top: 156px; left: 62px; font-family: Sans-Serif; color: #333; text-align: center; font-size: 11px; width: 70px;">8930 au</div>    </div>
    </body>
    </html>

    I am using JSON data to update the guage every 20 seconds.

    On the update, the value goes to NaN.

    Why is this? Thanks.

    Guage update issue. #51096

    mh512
    Participant

    It’s either NaN or a large number that is incorrect.

    Guage update issue. #51134

    Dimitar
    Participant

    Hello mh512,

    Are you sure record.smc is a number and not string? Please try the following:

    $("#gaugeContainer").jqxGauge('setValue', parseInt(smcvalue));

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.