5

I am a newbie in web development. I have just started programming in php. I want to develop a dynamic page that is connected to MySQL database (from a server) and display the result in a plot (could be scatter, histogram) in real time. So far I managed to get my data from my database and display the graph. However, I couldn't manage to do it in real time.

I have been searching around. What I found was using AJAX to do the real time plot. Fine, I did some tutorial on it and was able to run the examples. My challenge is to plot the graph.

If it helps, this is exactly what I want to do http://jsxgraph.uni-bayreuth.de/wiki/index.php/Real-time_graphing

I have tried to run this code but I was not able to.

Could anyone give me how to start from simple? I will elaborate if my question is not clear enough. Thank you in advance!

@Tim, here is what I tried to do.

My php is

 <?php


   $con = mysql_connect("localhost","root","");
   if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }
    else
    //echo "Database Connected!";
   mysql_select_db("DB", $con);
   $sql=mysql_query("SELECT Def_ID, Def_BH FROM BBB WHERE Ln_Def < 1200");

   $Def_ID= array();  
   $Def_BH = array();

  while($rs = mysql_fetch_array($sql))
  {
    $Def_ID[] = $rs['Def_ID'];
    $Def_BH [] = $rs['Def_BH '];

  }

  mysql_close($con);

  $json = array(
  'Def_ID' => $Def_ID,
  'Def_BH' => $Def_BH
  );

  echo json_encode($json);
?>

The output is 

{"Df_ID":["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41"],"Df_BH":["1","1","1","5","5","2","1","1","1","1","2","1","1","1","1","1","1","1","1","1","1","1","2","1","1","2","1","3","10","1","2","1","1","1","2","2","2","1","1","1","1","1"]}

Then my script follows

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Flot Example: Real-time updates</title>
        <link href="../examples.css" rel="stylesheet" type="text/css">
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
         <script language = "javascript" type="text/javascript" src="Include/excanvas.js"></script>
        </head>
    <body>

        <div id="placeholder" style="width:600px;height:300px"></div>


    </body>

    <script type="text/javascript">
    function doRequest(e) {
    var url = 'fakesensor.php'; // the PHP file
    $.getJSON(url,data,requestCallback); // send request
}




function requestCallback(data, textStatus, xhr) {
  //       // you can do stuff with "value" here
   $.each(data, function(index, value) {
        console.log(value.Df_ID); 
        console.log(value.Df_BH); 
          });
  }

    </script>

    </html>

I would like to plot Def_Id versus Def_BH. Do you see what have gone wrong?

Improve this question

3 Answers 3

Reset to default
5

Look at High Charts Dynamic Update ;-)

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you e-Learner. I will check it out.
4

First, you need to get the output right. In my opinion, JSON is the best format to transfer data between server and client using async requests. It's a data format that can be parsed easily by a lot of programming languages.

Next, you need to figure out what you are going to transfer. Are you going to transfer a bulk of data at once and animate it using javascript, or are you planning to send a request per new bit?

My advice: make the amount of requests as little as possible. Requests are slow.

How do you know what to send? Are you going a timestamp? An ID? Anything is possible. Because ID's auto-increment, you might as well use that.

So first, I'm going to set up my PHP:

// get user input
$lastID = intval($_GET['lastid']);

// --------------------------------
// FETCH RECORDS FROM DATABASE HERE
// --------------------------------
// $sql = "SELECT * FROM `graph` WHERE `id` > " . $lastID;

// CREATE DUMMY CONTENT
$data = array();

for($i = $lastID; $i < $lastID + 50; $i++) {
    array_push($data, array(
        'id'        => $i,
        'position'  => array(
            'x' => $i,
            'y' => mt_rand(0, 10) // random value between 0 and 10
        )
    ));
}
// END CREATING DUMMY CONTENT

// create response
$json = array(
    'lastID'    => $data[count($data) - 1]['id'],
    'data'      => $data
);

// display response
echo json_encode($json);

As you can see, I'm getting a bulk of data using lastid as input. That input is important.

Now, we are going to set up our javascript to get the request. I'm using the jQuery library for my AJAX requests because I'm a jQuery fanboy!

var interval = setInterval(doRequest, 4000); // run "doRequest" every 4000ms
var lastID = 0; // set 0 as default to ensure we get the data from the start

function doRequest(e) {
    var url = 'my-file.php'; // the PHP file
    var data = {'lastid': lastID}; // input for the PHP file

    $.getJSON(url, data, requestCallback); // send request
}

// this function is run when $.getJSON() is completed
function requestCallback(data, textStatus, xhr) {
    lastID = data.lastID; // save lastID

    // loop through data
    $.each(data, function(index, value) {
        // you can do stuff with "value" here
        console.log(value.id); // display ID
        console.log(value.position.x); // display X
        console.log(value.position.y); // display Y
    });
}

All that remains is outputting the results to a graph!

When you look at your PHP response you'll see that there's one object with two properties containing an array.

{
    "Df_ID": [1, 2, 3, ...],
    "Df_BH": [1, 2, 3, ...]
}

You can access these properties by... calling those properties data.Df_ID, data.Df_BH

function requestCallback(data, textStatus, xhr) {
    console.log(data.Df_ID, data.Df_BH);
}
Improve this answer

6 Comments

Thank you Tim. I am gonna try this. It seems it solves my problem. I will update you with my progress.
Hi @Tim, sorry for the delay. I was busy with some other task. According to your suggestion, I also set up my php. I wrote a query and got my data from the database. It works well. Now, I want to receive my data from php and plot it using javascript. Here is the challenge. For the moment, I don't send any input to my php, want to keep it simple. My challenge is in the requestCallback function. I couldn't get the data out to use it. I will add my code.
@Chris well it all depends on the output of your PHP file. Try to use console.log(data); in the requestCallback function. It will show you the response entirely in the console. If the response is empty, try to inspect the AJAX response. On Google Chrome's developer tools it's on the tab "Network", and on Firebug you can see it on the "Console" tab. You can post the output of your PHP file too ;)
see the output of my php file. I am trying to get the data out.
I have edited my answer and a added a modified requestCallback ;)
|
1

These are what i found in google -

You could create dynamic graphs and call using AJAX infinitely.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.