title: How to plot real time graph using php and AJAX?
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>If it helps, this is exactly what I want to do 
  <a href="http://jsxgraph.uni-bayreuth.de/wiki/index.php/Real-time_graphing" rel="noreferrer">http://jsxgraph.uni-bayreuth.de/wiki/index.php/Real-time_graphing</a></p>
  
  <p>I have tried to run this code but I was not able to. </p>
  
  <p>Could anyone give me how to start from simple? I will elaborate if my question is not clear enough. 
  Thank you in advance!</p>
  
  <p>@Tim, here is what I tried to do. </p>
  
  <p>My php is</p>
  
  <pre><code> &lt;?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 &lt; 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' =&gt; $Def_ID,
    'Def_BH' =&gt; $Def_BH
    );
  
    echo json_encode($json);
  ?&gt;
  </code></pre>
  
  <p>The output is </p>
  
  <pre><code>{"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"]}
  </code></pre>
  
  <p>Then  my script follows</p>
  
  <pre><code>   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Flot Example: Real-time updates&lt;/title&gt;
          &lt;link href="../examples.css" rel="stylesheet" type="text/css"&gt;
          &lt;!--[if lte IE 8]&gt;&lt;script language="javascript" type="text/javascript" src="../../excanvas.min.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
          &lt;script language="javascript" type="text/javascript" src="../../jquery.js"&gt;&lt;/script&gt;
          &lt;script language="javascript" type="text/javascript" src="../../jquery.flot.js"&gt;&lt;/script&gt;
           &lt;script language = "javascript" type="text/javascript" src="Include/excanvas.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="placeholder" style="width:600px;height:300px"&gt;&lt;/div&gt;
  
  
      &lt;/body&gt;
  
      &lt;script type="text/javascript"&gt;
      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); 
            });
    }
  
      &lt;/script&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>I would like to plot Def_Id versus Def_BH. Do you see what have gone wrong?</p>