jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Updating data in Gauge with php an mysql

Tagged: , , , , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Updating data in Gauge with php an mysql Posts
  • August 7, 2015 at 4:47 pm Updating data in Gauge with php an mysql #74627

    pluger
    Participant

    Hi, i’m newbie, and i have a problem, i’m test the gauge for, realtime data sending from a sensor, is urgent, i need help.
    I’m newbie

    first the file that send the json data to the Gauge
    ./php/gaugesca01.php

    <?php
include ("config.php");

$mysqli = new mysqli($db_server, $db_user, $db_pass, $db_name );

if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); }
$result = $mysqli->query("SELECT a01 from tablatiemporeal where <code>sl</code> = '4000' order by id desc limit 1");

foreach($result as $r) {

       $rows = array('a01' => (int) $r['a01']);
  
}

$table = $rows;

$jsonTable = json_encode($table);

echo $jsonTable;

?>

    The result echo $jsonTable is ‘{“a01”:111}’ / The range is 0 to 1000.

    The sensor name and the value(this value change every into 50 to 500 miliseconds) is important that gauge have a Setinterval or jqwidgets alternative to load dinamicaly the value data.

    And then the code that draw the gauge, but i have a problem with the code and var dataAdapter

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery" />
        <title id='Description'>Test</title>
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxdraw.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxgauge.js"></script>

    <script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
      
    <style type="text/css">
        #gaugeValue {

	        padding: 10px;
	    }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
           
            	var source =
		{
			datatype: "json",
				datafields: [
					{ name: 'a01'}
					
				],
//
				url: './php/gaugesca01test.php',
                        sort: function()
				{
					// update the grid and send a request to the server.
					$("#gaugeContainer").jqxGauge('updatebounddata', 'sort');
				}
                                
                };
            
		var dataAdapter = new $.jqx.dataAdapter(source);

             $('#gaugeContainer').jqxGauge({
                 
                source: dataAdapter,
                ticksMinor: { interval: 10, size: '5%' },
                ticksMajor: { interval: 20, size: '9%' },
                labels: { interval: 100 },
                caption: { value: 'Gauge Test', position: 'bottom', offset: [0,0], visible: true },
                value: 0,
                max: 1000,
                border: { visible:false },
                animationDuration: 50
            });
            
            $('#gaugeContainer').on('valueChanging', function (e) {
            $('#gaugeValue').text(Math.round(e.args.value) + ' kph');
            
            });

                    
        });
    </script>
</head>
<body style="background:white;">
    <div id="demoWidget">
	    <div 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>
      
    </div>
</body>
</html>
    August 10, 2015 at 6:20 am Updating data in Gauge with php an mysql #74661

    Dimitar
    Participant

    Hi pluger,

    The solution is to update your gauge via Ajax calls. I think you may find the help topic Update gauges via ajax helpful.

    Please also note that jqxGauge does not have a source property in its API. Here is how you should initialize your gauge:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery" />
    <title id='Description'>Test</title>
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxdraw.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
    <style type="text/css">
        #gaugeValue
        {
            padding: 10px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            var source = {
                datatype: "json",
                datafields: [{
                    name: 'a01',
                    type: 'number'
                }

                ],
                //
                url: './php/gaugesca01test.php',
                async: false
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                autoBind: true
            });

            $('#gaugeContainer').jqxGauge({
                ticksMinor: {
                    interval: 10,
                    size: '5%'
                },
                ticksMajor: {
                    interval: 20,
                    size: '9%'
                },
                labels: {
                    interval: 100
                },
                caption: {
                    value: 'Gauge Test',
                    position: 'bottom',
                    offset: [0, 0],
                    visible: true
                },
                value: 0,
                max: 1000,
                border: {
                    visible: false
                },
                animationDuration: 50
            });

            $('#gaugeContainer').jqxGauge('value', dataAdapter.records[0].a01);

            $('#gaugeContainer').on('valueChanging', function (e) {
                $('#gaugeValue').text(Math.round(e.args.value) + ' kph');

            });
        });
    </script>
</head>
<body style="background: white;">
    <div id="demoWidget">
        <div 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>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.