从数据库中获取并使用flot绘制实时图表

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.enter image description here

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

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 enter image description here

only taking last value .

1个回答



更改您的php脚本,使其输出固定数量的数据点。 这导致左侧的数据点“移动”出图形。</ p>

您可以使用 array_slice()减少一个太大的数组(和 array_fill() array_merge( )填充一个太小的数组,如果你想从一个部分填充数组开始。)</ p>

对于你的新PHP代码,尝试这样的事情:</ p >

  while($ row = oci_fetch_array($ stid,OCI_ASSOC)){
//添加返回数组的每一行
$ arr [] = array((strtotime($ row) ['WD'])* 1000),(float)$ row ['DATA']);
}
$ arr = array_slice($ arr,count($ arr) - 10,9);
echo json_encode( $ arr);
</ code> </ pre>
</ div>

展开原文

原文

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

dtip91401
dtip91401 看到更新的答案,但correc功能不确定,我不是一个PHP专家。
接近 5 年之前 回复
dongqiang2024
dongqiang2024 问题是它从最后10个数据点开始,后来哪个数据将来,它正在转移没有问题,但我怎么能从头开始输出?
接近 5 年之前 回复
doushi7314
doushi7314 最后进展了一点,但我怎么能删除旧的datapoint并插入新的? 请查看上面的更新部分
接近 5 年之前 回复
doushu7588
doushu7588 我明白你的观点......但是无法弄清楚如何去做。 你可以帮助解决这个问题吗?我是全新的PHP ..
接近 5 年之前 回复
dongshengli6384
dongshengli6384 添加新数据点时删除旧数据点。 例如,首先绘制数据点1到30,然后是2到31,然后是3到32,依此类推。 然后,您的数组中始终有30个数据点。
接近 5 年之前 回复
dounuogong0358
dounuogong0358 我没有得到你。 你能解释一下吗? 如果我第一次返回固定数量的数据点,那么以后我将如何更新新值?
接近 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐