使用Flot jQuery插件與PHP和MySQL

我試圖讓jquery flot簡單的線條圖使用MySQL，PHP和jQuery工作。
我只是得到一個沒有繪製點或線的空白圖表。據我所知，代碼中的一切都應該是正確的，但我想看看我錯過了什麼。使用Flot jQuery插件與PHP和MySQL

請參閱下面的代碼。感謝幫助！

<html> 
<head> 

<style type="text/css"> 
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; } 
#placeholder { width: 450px; height: 200px; } 
</style> 


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

</head> 
<body> 

$lineqry = 

"SELECT 
dsmp.metric_date, 
dsmp.metric_value 
FROM applications.daily_scorecard_metric_performance dsmp 

$lres = mysql_query ($lineqry,$prod); 
$lrow = mysql_fetch_array($lres); 

    while($lrow = mysql_fetch_assoc($lres)) 
{ 
    $lineset[] = array($lrow['metric_date'],$lrow['metric_value']); 
} 
?> 


<script type="text/javascript"> 
var plotdata = <?php echo json_encode($lineset);?>; 

$(function() { 
$.plot($("#placeholder"), [ plotdata ]); 
}); 
</script> 

<div id="placeholder"></div> 

</body> 
</html>

這裏是在PHP中的數組$lineresult的輸出示例：

array(9) { [0]=> array(2) { [0]=> string(10) "2013-09-30" [1]=> string(1) "0" } [1]=> array(2) { [0]=> string(10) "2013-10-01" [1]=> string(3) "423" } [2]=> array(2) { [0]=> string(10) "2013-10-02" [1]=> string(3) "404" } [3]=> array(2) { [0]=> string(10) "2013-10-03" [1]=> string(3) "428" } [4]=> array(2) { [0]=> string(10) "2013-10-04" [1]=> string(3) "353" } [5]=> array(2) { [0]=> string(10) "2013-10-05" [1]=> string(3) "190" } [6]=> array(2) { [0]=> string(10) "2013-10-06" [1]=> string(3) "315" } [7]=> array(2) { [0]=> string(10) "2013-10-07" [1]=> string(3) "531" } [8]=> array(2) { [0]=> string(10) "2013-10-08" [1]=> string(3) "520" } }

這裏的json_encode的輸出：

[["2013-09-30","0"],["2013-10-01","423"],["2013-10-02","404"],["2013-10-03","428"],["2013-10-04","353"],["2013-10-05","190"],["2013-10-06","315"],["2013-10-07","531"],["2013-10-08","520"]]

來源

2013-10-10 JoshG

要延長Koala_dev的答案，你需要通過額外的選項進入$.plot()時間段被正確識別的對象。

/** 
* Creates for json: 
* [[13805000000, 0],[138080600000, 423].. etc 
**/ 
$lineset[] = array(
       strtotime($lrow['metric_date']) * 1000, 
       (int) $lrow['metric_value'] 
      );

這將沿着x軸打印時間戳;然後轉換爲實際可讀的日期格式，則需要在調用$.plot()時將其與選項一起添加;

enter image description here

/** 
* Flot Options, 
* Modify the timestamps with: 
* %Y - Year, %m - Month, %d - Day 
**/ 
var opts = { 
    xaxis: { 
     mode: "time", 
     timeformat: "%Y/%m/%d" 
    } 
}; 

if (typeof $.fn.plot !== 'undefined') { 
    $.plot($("#placeholder"), [ plotdata ], opts); 
}

然後最後用可讀x軸下面產生正確的圖表：

enter image description here

來源

2013-10-10 07:25:25 MackieeE

謝謝！工作很好，非常感激。 – JoshG

從the documentation似乎插件不支持數據作爲字符串，也可以生成需要使用時間戳的時間序列幷包含時間插件：jquery.flot.time.js。

添加一個js文件，並進行以下更改到你的PHP代碼提供正確的數據：

$lineset[] = array(strtotime($lrow['metric_date']) * 1000, (int) $lrow['metric_value']);

來源

2013-10-10 06:24:02

我提交的[編輯]（http://stackoverflow.com/審查/建議編輯/ 3104545）建議延長這個答案，但被拒絕:( – MackieeE

使用Flot jQuery插件與PHP和MySQL

回答

相關問題