Question

I have been trying to resolve this but just couldn’t get it right. I have the following php code that gets some data which are stored in interval of milliseconds, from mysql and send to the client side for jqplot to draw the graph.

    <?php
    $unit = $_GET["units"];

    $sq="SELECT su_id FROM Station_stat
    WHERE su_id in ($unit) GROUP BY su_id";

    $res = mysql_query($sq);
    $first=true;
    echo "Label=";
    echo "[";
    while($row = mysql_fetch_array($res)){
        if ($first != true)
          echo ",";
          echo "{label:\"SUID ".$row['su_id']."\"}";
        $first = false;
      }
    echo "];";


    $sql="SELECT su_id FROM Station_stat
    WHERE su_id in ($unit) GROUP BY su_id";

    $result = mysql_query($sql);
    $first=true;
    echo "s1=";
    echo "[";
    while($row = mysql_fetch_array($result)){
    $suid = explode(",", $row['su_id']);

    if ($first != true)
    echo ",";
    $first = false;

    $count=count($suid);
    $i=0;
    while($i<$count)
      {
      getsuId($suid[$i]);
      ++$i;
      }
    }
    echo "];";

    function getsuId($suid){

    $start = $_GET["start"];
    $stop = $_GET["stop"];

    $qt=mysql_query("select TIMESTAMP(d_time), bs_rssi from Station_stat WHERE su_id ='".$suid."' and d_time BETWEEN '".$start."' and '".$stop."' GROUP BY d_time");

    $first=true;
    echo "[";
    while($row = mysql_fetch_array($qt)){
        if ($first != true)
          echo ",";
          echo "[\"".$row['TIMESTAMP(d_time)']."\",".$row['bs_rssi']."]";
          $first = false;
      }
    echo "]";
    }

    mysql_close();
    ?>

And below is the function that is sending and receiving data to and from the php script on the click of a button.

    function display() {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    eval(xmlhttp.responseText);
    drawPlot();
      }
    }
    var units = document.getElementById('suid').value;
    var stat = document.getElementById('start').value;
    var stop = document.getElementById('stop').value;
    var query = "?units=" + units ;
      query +=  "&start=" + start ;
      query +=  "&stop=" + stop;
    xmlhttp.open("GET","../chart.php" + query , true);
    xmlhttp.send();
    }

    function drawPlot() {
    var start = $("#start").val();
    plot1 = $.jqplot("chart1", s1, {
    //title: "Aera Chart",
    series: Label, 
    axes: { 
        xaxis: { 
             renderer:$.jqplot.DateAxisRenderer, 
             min: start,
             tickInterval: '2 minute',
             tickRenderer: $.jqplot.CanvasAxisTickRenderer,
             tickOptions: {
                    formatString: '%Y-%m-%d %H:%M:%S',
                    angle: -55
                    }
             },
        yaxis: {
             label: "[RSSI] ",
             tickOptions:{formatString:'%d '}
        }

        }, 
     cursor:{
              show: true, 
              zoom: true
     },
     legend: { show: true }
     });
     plot1.redraw();
     }

Problems I have with it now are:

(1) It takes time (like 20-30seconds) to render the graph.

(2) Whenever I drag to zoom, then the page just wouldn’t respond.

Please I will appreciate your help. Thank you.

Answer 1

After taking some days off this project I finally realized that I made a mistake in the Ajax function code pasted up there. I declared one of the parameters to be sent to the serverside as “stat”, but when adding it to others I added “start”.

    var stat = document.getElementById('start').value;
    query +=  "&start=" + start ;

After editing that line, I could see the jqplot responding faster to load graph.
Thank you.