Ajax Dynamic data with Justgage

22nd August 2013

Jquery - Ajax

This script will automatically update the webpage showing four dials, and will update them without refreshing the page. If new data appears in the database it will be updated in 2.5 seconds.
The page has a timer that is set at 2500 (2.5 seconds). It will call api.php and search the database, then update via ajax.


<html>
  <head>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>
  <h2> Dynamic Ajax  </h2>

    <script src="resources/js/raphael.2.1.0.min.js"></script>
    <script src="resources/js/justgage.1.0.1.min.js"></script>

  <script id="source" language="javascript" type="text/javascript">
var g1, g2;
var fish=0;
  window.onload = function(){
    var g1 = new JustGage({
      id: "g1", 
      value: fish, 
      min: 0,
      max: 100, //need to replace dynamically
      title: "Client1",//need to replace dynamically
      label: "Load"
    });

    var g2 = new JustGage({
      id: "g2", 
      value: fish, 
      min: 0,
      max: 100,//need to replace dynamically
      title: "Client2",//need to replace dynamically
      label: "Used"
    });

       var g3 = new JustGage({
      id: "g3", 
      value: fish, 
      min: 0,
      max: 100,
      title: "Client3",
      label: "Load"
    });

    var g4 = new JustGage({
      id: "g4", 
      value: 2, 
      min: 0,
      max: 100,
      title: "Client4",
      label: "Used"
    });
// this sends the variable 'client1' to api.php every whatever its set at via newValue.
    setInterval(function() {
        $.get('api.php', 'client=client1', function (newValue) { g1.refresh(newValue); });
        $.get('api.php', 'client=client2',function (newValue) { g2.refresh(newValue); });  
         $.get('api.php', 'client=client3',function (newValue) { g3.refresh(newValue); });
        $.get('api.php', 'client=client4',function (newValue) { g4.refresh(newValue); });    
    }, 2500);
  };
   // this page recieves the call and gets 50 or 34 or 39 back as a response, and displays the one number for each page call, data was pushed from the ajax call...
    </script>     
    <div id="g1" class="output"></div>
    <div id="g2" class="output"></div> 
    <div id="g3" class="output"></div>
    <div id="g4" class="output"></div>
  </body>
</html>
<style>
      body {
        text-align: center;
      }
      
      #g1, #g2, #g3, #g4 {
        width:200px; height:160px;
        display: inline-block;
        margin: 1em;
      }
          
      p {
        display: block;
        width: 450px;
        margin: 2em auto;
        text-align: left;
      }
</style>

<html>

<head>

</head>

<body>

<h2> Dynamic Ajax </h2>

var g1, g2;

var fish=0;

window.onload = function(){

var g1 = new JustGage({

id: "g1",

value: fish,

min: 0,

max: 100, //need to replace dynamically

title: "Client1",//need to replace dynamically

label: "Load"

});

var g2 = new JustGage({

id: "g2",

value: fish,

min: 0,

max: 100,//need to replace dynamically

title: "Client2",//need to replace dynamically

label: "Used"

});

var g3 = new JustGage({

id: "g3",

value: fish,

min: 0,

max: 100,

title: "Client3",

label: "Load"

});

var g4 = new JustGage({

id: "g4",

value: 2,

min: 0,

max: 100,

title: "Client4",

label: "Used"

});

// this sends the variable 'client1' to api.php every whatever its set at via newValue.

setInterval(function() {

$.get('api.php', 'client=client1', function (newValue) { g1.refresh(newValue); });

$.get('api.php', 'client=client2',function (newValue) { g2.refresh(newValue); });

$.get('api.php', 'client=client3',function (newValue) { g3.refresh(newValue); });

$.get('api.php', 'client=client4',function (newValue) { g4.refresh(newValue); });

}, 2500);

};

// this page recieves the call and gets 50 or 34 or 39 back as a response, and displays the one number for each page call, data was pushed from the ajax call...

</script>

</body>

</html>

<style>

body {

text-align: center;

}

#g1, #g2, #g3, #g4 {

width:200px; height:160px;

display: inline-block;

margin: 1em;

}

p {

display: block;

width: 450px;

margin: 2em auto;

text-align: left;

}

</style>

api.php


<?php 
error_reporting(0);

  $host = "localhost";
  $user = "root";
  $pass = "";

  $databaseName = "database";
  $tableName = "tabledata";
$client = mysql_real_escape_string($_GET['client']);
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  $result = mysql_query("SELECT conversions FROM cmdata where client='$client'");          
  $array = mysql_fetch_row($result);                         

  echo $array[0];

?>