Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First, you need to get the output right. In my opinion, <a href="http://json.org/" rel="nofollow">JSON</a> 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.</p> <p>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?</p> <p>My advice: make the amount of requests as little as possible. Requests are slow.</p> <p>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.</p> <p>So first, I'm going to set up my PHP:</p> <pre><code>// get user input $lastID = intval($_GET['lastid']); // -------------------------------- // FETCH RECORDS FROM DATABASE HERE // -------------------------------- // $sql = "SELECT * FROM `graph` WHERE `id` &gt; " . $lastID; // CREATE DUMMY CONTENT $data = array(); for($i = $lastID; $i &lt; $lastID + 50; $i++) { array_push($data, array( 'id' =&gt; $i, 'position' =&gt; array( 'x' =&gt; $i, 'y' =&gt; mt_rand(0, 10) // random value between 0 and 10 ) )); } // END CREATING DUMMY CONTENT // create response $json = array( 'lastID' =&gt; $data[count($data) - 1]['id'], 'data' =&gt; $data ); // display response echo json_encode($json); </code></pre> <p>As you can see, I'm getting a bulk of data using <code>lastid</code> as input. That input is important.</p> <p>Now, we are going to set up our javascript to get the request. I'm using <a href="http://jquery.com/" rel="nofollow">the jQuery library</a> for my AJAX requests because I'm a jQuery fanboy!</p> <pre><code>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 }); } </code></pre> <p>All that remains is outputting the results to a graph!</p> <hr> <p>When you look at your PHP response you'll see that there's one object with two properties containing an array.</p> <pre><code>{ "Df_ID": [1, 2, 3, ...], "Df_BH": [1, 2, 3, ...] } </code></pre> <p>You can access these properties by... calling those properties <code>data.Df_ID</code>, <code>data.Df_BH</code></p> <pre><code>function requestCallback(data, textStatus, xhr) { console.log(data.Df_ID, data.Df_BH); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHow to plot real time graph using php and AJAX?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USTim S.
    1. USTim S.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to plot real time graph using php and AJAX?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you Tim. I am gonna try this. It seems it solves my problem. I will update you with my progress.
      singulars
      1. PO
      1. USChris
    2. CO@Chris so how did it go?
      singulars
      1. PO
      1. USTim S.
    3. COHi @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.
      singulars
      1. PO
      1. USChris
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload