Fetching from Database and Plotting realtime chart using flot

Question

I'm fetching data from database using php and storing data into an array and then storing that array into JavaScript array and then display the chart using flot. and My goal is that in graphic move to the left as new data comes in.

x.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<?php 
 $i=0;
while($row = oci_fetch_array($stid,OCI_ASSOC)){

  // add each row returned into an array
  
  $arr[] = array($i++, (float)$row['DATA']);


}
echo json_encode($arr);
?>

Fetching from database I'm getting following output=>

[[0,15.739993],[1,13.698263],[2,13.214383],[3,15.393282],[4,14.356073],[5,13.364647],...........]

And

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>

<script type="text/javascript">

var data=[];
function f(){
data= <?php echo json_encode($arr) ?>;
}

var options={
                series: {
                        lines: {
                                show: true,
                                lineWidth: 2,
                                //  fill: true
                                },
                        points:{
                                show: true
                                }
                        },
               legend: {        
                            labelBoxBorderColor: "#B0D5FF"
                        },
                    grid: {
                            hoverable: true, 
                            clickable: true,
                            backgroundColor: { 
                                                colors: ["#B0D5FF", "#5CA8FF"] 
                                            }
                            }
};
$(document).ready(function () {
f();
var dataset=[
              { 
                label: "Data", 
                data: data, 
                points: { 
                            symbol: true
                        } 
             }
            ];

     $.plot($("#flot-container"), dataset , options);
function update() {
f();
if(data.length>10){
data.shift();
   }
                            
$.plot($("#flot-container"), dataset, options);
setTimeout(update, 5000);
      }
      update();
});
 
</script>

</head>

<body>
<div id="flot-container" style="width:450px;height:300px;margin:0 auto"></div>

</body>
</html>

I'm getting following output.

Now when I'm inserting new data into database , first data is not shifting/moving. New data comes and adding to the chart.

I want to update the graph in realtime.like this example http://jsfiddle.net/UMt7d/

How can i fix it? Please Help

UPDATED PART

<?php
include("mydb.php");
// run query
$sql = "select DATA from xet where to_char(workdate,'dd/mm')='25/02'";
$stid=oci_parse($conn, $sql);
// set array
$arr = array(0,0);
if(!$stid){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}

$r=oci_execute($stid);

if(!$r){
$e=oci_error($stid);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}


// look through query
while($row = oci_fetch_array($stid,OCI_ASSOC)){

  // add each row returned into an array
  $arr=array_slice($arr,1,9);
  $arr[] = array((strtotime($row['WD'])*1000) , (float)$row['DATA']);
 echo json_encode($arr);
 echo "</br>";
}
?>

getting output like as follows=>

[0,[0,15.739993]]
[[0,15.739993],[1,13.698263]]
[[1,13.698263],[2,13.214383]]
[[2,13.214383],[3,15.393282]]
[[3,15.393282],[4,14.356073]]
[[4,14.356073],[5,13.364647]]
[[5,13.364647],[6,15.040561]]
[[6,15.040561],[7,12.138517]]
...........................
[[16,13.734816],[17,15.6194315]]

getting following chart

only taking last value .

Raidri · Answer 1 · 2015-09-27T20:36:56.873

0

Change your php script so that it outputs a fixed amount of data points. This leads to data points on the left "moving" out of the graph.

You can use array_slice() to reduce an array which is too big (and array_fill() and array_merge() to fill an array which is too small if you want to start with a partial filled array).

For your new php code, try something like this:

while($row = oci_fetch_array($stid,OCI_ASSOC)){
    // add each row returned into an array
    $arr[] = array((strtotime($row['WD'])*1000) , (float)$row['DATA']);
}
$arr = array_slice($arr, count($arr) - 10, 9);
echo json_encode($arr);

edited Sep 27 '15 at 20:36

answered Sep 25 '15 at 08:57

Raidri

17,258
9
62
65

i didn't get you. Can you please explain? If i return fixed amount of data point at first time then later how will i update new values? – ARoy Sep 25 '15 at 12:04
You remove old datapoints when you add new ones. For example at first you draw data points 1 to 30, then 2 to 31, then 3 to 32 and so on. Then you have always 30 data points in your array. – Raidri Sep 25 '15 at 12:15
I got your point ....but couldn't figure it out how to do it. can you please help to sort this issue?I'm totally new in php.. – ARoy Sep 25 '15 at 20:19
Finally progressed little bit but how can i remove old datapoint and insert new ?? please check updated part above – ARoy Sep 27 '15 at 15:41
problem is that it's starting from last 10 datapoint and later which data will come, it's shifting there is no problem but how can i get the output from beginning? – ARoy Sep 27 '15 at 16:35
See updated answer, but correc functionality not sure, I am not a php expert. – Raidri Sep 27 '15 at 20:37

Fetching from Database and Plotting realtime chart using flot

1 Answers1