jQWidgets Forums

jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Gauge data from json (PHP)

Tagged: , , ,

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Gauge data from json (PHP) Posts
  • February 22, 2016 at 3:17 pm Gauge data from json (PHP) #81687

    Blomotom
    Participant

    Hello could you help me ?
    I want make a gauge with a number value from json data – PHP

    My data.php

    <?php
	#Include the connect.php file
	include('connect.php');
	#Connect to the database
	//connection String
	$connect = mysql_connect($hostname, $username, $password)
	or die('Could not connect: ' . mysql_error());
	//Select The database
	$bool = mysql_select_db($database, $connect);
	if ($bool === False){
	   print "can't find $database";
	}
	$dated=date("Y-m-d");
	$query = "SELECT SUM(beneficev) AS beneficev2 FROM <code>vol</code>";
	//$query = "SELECT rbilletsv, rcargov, rcollationsv FROM <code>vol</code>";
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
	// get data and store in a json array
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$Ini=70000000;
		$CA = $row['beneficev2'] + $Ini;
		$orders[] = array(
			//'startValue' => $Ini,
			'Value' => $CA
		  );
	}
	echo json_encode($orders);
?>

    http://da42.co.nf/vafsp/E00001TEST/data.php

    My index.php 

    <!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;
		
		
            
		//	 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: 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: 50, size: '5%' },
                ticksMajor: { interval: 100, 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) + ' Euros');
		    });
			
		
  

 
    </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>
    February 23, 2016 at 8:16 am Gauge data from json (PHP) #81704

    ivailo
    Participant

    Hi Blomotom,

    In your case you have to use bigger values about ticksMinor/ticksMajor interval.
    Please try 

    ticksMinor: { interval: 50000000, size: '5%' },
ticksMajor: { interval: 10000000, size: '9%' },

    instead

    ticksMinor: { interval: 50, size: '5%' },
ticksMajor: { interval: 100, size: '9%' },

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    February 23, 2016 at 8:45 am 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>
    February 23, 2016 at 10:46 am Gauge data from json (PHP) #81711

    ivailo
    Participant

    Hi Blomotom,

    You can try to set the value of the gauge in loadComplete callback of the dataAdapter.
    Try this code:

    <script type="text/javascript">
          $(document).ready(function () {
              var smcvalue;
              var source =
              {
                 datatype: "json",
                 datafields: [
                    { name: 'Value'}
                ],
                url: 'data.php'
              };    
              
               var dataAdapter = new $.jqx.dataAdapter(source,{
                loadComplete: function (records) {
                        $('#gaugeContainer').jqxGauge('value', records[0].Value);
                }
               });
                 
               $('#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
                      });
                 
                dataAdapter.dataBind();
                $('#gaugeContainer').on('valueChanging', function (e) {
                       $('#gaugeValue').text(Math.round(e.args.value) + ' au');
                });
          });
    </script>

    You also can use 

    formatValue: function (value) {
                 .....
             }

    To format your labels.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    February 23, 2016 at 11:03 am Gauge data from json (PHP) #81713

    Blomotom
    Participant

    HEllo,
    I m sorry, but same problem :

    Code with fix 2 :

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>EEEEEEEEE</title>
    <link rel="stylesheet" href="../../jqwidgets/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">

    
          $(document).ready(function () {
              var smcvalue;
              var source =
              {
                 datatype: "json",
                 datafields: [
                    { name: 'Value'}
                ],
                url: 'data.php'
              };    
              
               var dataAdapter = new $.jqx.dataAdapter(source,{
                loadComplete: function (records) {
                        $('#gaugeContainer').jqxGauge('value', records[0].Value);
                }
               });
                 
               $('#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
                      });
                 
                dataAdapter.dataBind();
                $('#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>
    February 23, 2016 at 12:14 pm Gauge data from json (PHP) #81719

    ivailo
    Participant

    Hi Blomotom,

    You have to add reference to jqxdraw.js.
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    Also check your console for errors related to the paths of the used js files.

    It will be helpful for you to read the Getting started guide of this widget.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    February 23, 2016 at 1:11 pm Gauge data from json (PHP) #81720

    Blomotom
    Participant

    Ok sorry, i learn by exemple. I m not a programmer.
    Work well with this code : 

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>EEEEEEEEE</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../jquery-1.10.2.min.js"></script>
	 <script type="text/javascript" src="../../scripts/jquery-1.11.1.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>
	<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
	<style type="text/css">
   </style>
	<script type="text/javascript">

    
          $(document).ready(function () {
              var smcvalue;
              var source =
              {
                 datatype: "json",
                 datafields: [
                    { name: 'Value'}
                ],
                url: 'data.php'
              };    
              
               var dataAdapter = new $.jqx.dataAdapter(source,{
                loadComplete: function (records) {
                        $('#gaugeContainer').jqxGauge('value', records[0].Value);
                }
               });
                 
               $('#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: 400,
                  height: 400,
                  caption: { value: 'Chiffre d affaire', position: 'bottom', offset: [0,0], visible: true },
                  colorScheme: 'scheme05',
                          animationDuration: 1200
                      });
                 
                dataAdapter.dataBind();
                $('#gaugeContainer').on('valueChanging', function (e) {
                       $('#gaugeValue').text(Math.round(e.args.value) + ' Euros');
                });
          });
    </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>

    Can i abuse ? Could you explain how to have Value bottom the caption ?

                    caption: { value: 'Chiffre d affaire', position: 'bottom', offset: [0,0], visible: true },
                  colorScheme: 'scheme05',
                          animationDuration: 1200
                      });
                 
                dataAdapter.dataBind();
                $('#gaugeContainer').on('valueChanging', function (e) {
                       $('#gaugeValue').text(Math.round(e.args.value) + ' Euros');  // HOW TO ALIGN BOTTON ???
                });
          });

    See : http://da42.co.nf/vafsp/E00001TEST/index.php
    Thanks

    February 23, 2016 at 3:52 pm Gauge data from json (PHP) #81735

    ivailo
    Participant

    Hi Blomotom,

    Change top and left positions of your caption like this:
    <div id="gaugeValue" style="position: absolute; top: 230px; left: 110px; ...

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.