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

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

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

  • 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>
    
    • This topic was modified 4 years, 7 months ago by  pluger.

    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/

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

You must be logged in to reply to this topic.