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

【问题标题】：Fetching from Database and Plotting realtime chart using flot从数据库中获取并使用 flot 绘制实时图表
【发布时间】：2015-09-25 07:48:55
【问题描述】：

我正在使用 php 从数据库中获取数据并将数据存储到一个数组中，然后将该数组存储到 JavaScript 数组中，然后使用 flot 显示图表。我的目标是在新数据进入时以图形方式向左移动。

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

从数据库中获取我得到以下输出=>

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

和

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

我得到以下输出。

现在，当我将新数据插入数据库时，第一个数据不会移动/移动。新数据出现并添加到图表中。

我想实时更新图表。就像这个例子http://jsfiddle.net/UMt7d/

我该如何解决？请帮忙

更新部分

<?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>";
}
?>

得到如下输出=>

[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]]

获取以下图表

只取最后一个值。

【问题讨论】：

标签： javascript php jquery oracle10g flot

【解决方案1】：

更改您的 php 脚本，使其输出固定数量的数据点。这会导致左侧的数据点“移出”图表。

您可以使用array_slice() 来减少太大的数组（如果您想从部分填充的数组开始，则可以使用array_fill() 和array_merge() 来填充太小的数组）。

对于您的新 php 代码，请尝试以下操作：

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

【讨论】：

我没听懂你。你能解释一下吗？如果我第一次返回固定数量的数据点，那么稍后我将如何更新新值？
在添加新数据点时会删除旧数据点。例如，首先您绘制数据点 1 到 30，然后是 2 到 31，然后是 3 到 32，依此类推。那么你的数组中总是有 30 个数据点。
我明白你的意思....但不知道该怎么做。你能帮忙解决这个问题吗？我是 php 的新手..
终于进步了一点，但我怎样才能删除旧的数据点并插入新的？请检查上面的更新部分
问题是它从最后 10 个数据点开始，稍后会出现哪些数据，它正在转移没有问题，但我怎样才能从头开始输出？