Geek Answers Handbook

How to plot real time using php and AJAX?

I am new to web development. I just started programming in php. I want to create a dynamic page associated with a MySQL database (from the server) and display the result in a graph (there may be a spread, a histogram) in real time. So far I have managed to get data from my database and display a graph. However, I could not do this in real time.

I searched around. What I found is to use AJAX to create real-time graphs. Ok, I did a few lessons and was able to run the examples. My task is to build a schedule.

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

I tried to run this code but could not.

Can someone give me a simple way to start? I will clarify if my question is not clear enough. Thank you in advance!

@Tim, this is what I tried to do.

My php

<?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); ?>

Output signal

 {"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 build Def_Id against Def_BH. Do you see what went wrong?

+4
source share
3 answers

First, you need to get the exit correctly. In my opinion, JSON is the best format for transferring data between server and client using asynchronous requests. It is a data format that is easily parsed by many programming languages.

Then you need to find out what you are going to transmit. Are you going to transfer a large amount of data at the same time and animate it using javascript or plan to send a request for a new bit?

My advice: make the number of queries as small as possible. Requests are slow.

How do you know what to send? Are you going to make a time stamp? Identifier? Everything is possible. Since the identifier is automatically incremented, you can also use it.

So first, I'm going to configure 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 get most of the data using lastid as input. This entry is very important.

Now we are going to configure our javascript to receive the request. I use jQuery library for my AJAX requests because I'm a jQuery fan!

 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 displaying the results!

When you look at your PHP answer, you will see that there is 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 these properties data.Df_ID , data.Df_BH

 function requestCallback(data, textStatus, xhr) { console.log(data.Df_ID, data.Df_BH); }
+3
source

This is what I found on google -

You can create dynamic graphs and make calls using AJAX endlessly.

+1
source

More articles:


All Articles