jQWidgets Forums

Forum Replies Created

Viewing 16 post (of 16 total)
1 2
  • Author
    Posts
  • February 23, 2016 at 8:45 am in reply to: Gauge data from json (PHP) Gauge data from json (PHP) #81705

    Blomotom
    Participant

    Thanks,
    I think this is a problem in fact. Thank you.

    But this fix not solved the first problem.
    When i load index.php nothing appear :
    http://da42.co.nf/vafsp/E00001TEST/data.php
    http://da42.co.nf/vafsp/E00001TEST/index.php

    Code with first fix : 

    <!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: 'Value'}
			],
			url: 'data.php'
			async: false
		};		
		
		 var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();

            var records = dataAdapter.records;
		};
		
            $('#gaugeContainer').jqxGauge({
                ranges: [{ startValue: 0, endValue: 50000000, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 5, startWidth: 1 },
                         { startValue: 50000000, endValue: 100000000, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 10, startWidth: 5 },
                         { startValue: 100000000, endValue: 200000000, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 16, startWidth: 13 }],
                ticksMinor: { interval: 50000000, size: '5%' },
                ticksMajor: { interval: 10000000, size: '9%' },
				labels: { interval: 10000000 },
                value: 0,
				max: 200000000,
				width: 200,
				height: 200,
				caption: { value: 'Soil moisture', position: 'bottom', offset: [0,0], visible: true },
				colorScheme: 'scheme05',
                animationDuration: 1200
            });
			 
			 $('#gaugeContainer').jqxGauge('value', dataAdapter.records[0].Value);
			 $('#gaugeContainer').on('valueChanging', function (e) {
             $('#gaugeValue').text(Math.round(e.args.value) + ' au');
		    });
			

    </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>
  • Author
    Posts
Viewing 16 post (of 16 total)
1 2