從數據庫提取並使用flot繪製實時圖表

我使用php從數據庫中提取數據並將數據存儲到數組中，然後將該數組存儲到JavaScript數組中，然後使用flot顯示圖表。而我的目標是，在圖形向左移動作爲新的數據用武之地。從數據庫提取並使用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>

我收到以下輸出。

現在，當我向數據庫中插入新數據時，第一個數據不會移動/移動。新數據出現並添加到圖表中。

我想在realtime.like這個例子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]]

得到下面的圖表

僅服用最後一個值。

來源

2015-09-25 ARoy

更改您的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);

來源

2015-09-25 08:57:36 Raidri

我沒有得到你。你能解釋一下嗎？如果我第一次返回固定數量的數據點，那麼以後我將如何更新新值？ – ARoy

刪除舊的數據點，當你添加新的數據點時。例如，首先繪製數據點1至30，然後繪製數據點2至31，然後3至32等等。然後你的數組中總是有30個數據點。 – Raidri

我明白你的觀點......但無法弄清楚如何去做。你可以請幫助排序這個問題？我完全新的PHP .. – ARoy

從數據庫提取並使用flot繪製實時圖表

回答

相關問題