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

Tagged: , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Guage update issue. Posts
  • March 16, 2014 at 9:42 pm 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.

    March 16, 2014 at 10:00 pm Guage update issue. #51096

    mh512
    Participant

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

    March 17, 2014 at 6:58 am 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/

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.