使用Flot jquery插件与PHP和MySQL

I'm trying to get a jquery flot simple line graph to work using MySQL, PHP and jquery.
I am only getting a blank chart with no plotted points or line. As far as I can tell, everything should be correct in the code, but I'd like to see what I'm missing.

See the code below. Appreciate the help!

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

Here's and example output of the array $lineresult in PHP:

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

here's the output of the 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"]] 

2个回答



要扩展 Koala_dev </ strong>的答案,您需要将额外的选项传递到 $ .plot()</ code>对象,用于正确识别时间码。 </ p>

  / ** 
*为json创建:
  • [[13805000000,0],[138080600000,423] .. etc
    ** /
    $ lineset [] = array(
    strtotime($ lrow ['metric_date'])* 1000,
    (int)$ lrow ['metric_value']
    );
    </ code> </ pre>
    \ n

    这将打印出沿x轴的时间戳; 然后转换成实际可读的日期格式,你需要在调用 $。plot()</ code>; </ p>

    <时将它与你的选项一起添加 img src =“https://i.stack.imgur.com/MNebw.jpg”alt =“在此输入图像说明”> </ p>

      / ** 
  • Flot 选项,
    修改时间戳:
    *%Y - 年,%m - 月,%d - 日
    *
    /
    var opts = {
    xaxis:{
    mode:“time”,

    timeformat:“%Y /%m /%d”
    }
    };

if(typeof $ .fn.plot!=='undefined'){
$ .plot($(“# 占位符“),[plotdata],opts);
}
</ code> </ pre>

然后最终使用可读的x轴生成正确的图表:</ p>

</ p>
</ div>

展开原文

原文

To extend on Koala_dev's answer, you'll need to pass extra options into the $.plot() object for timespans to be correctly recognised.

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

This'll print with the timestamps along the x-axis; then to convert into actual readable Date formats, you'll need to add it along with your options at the point of calling $.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 );
}

Which then finally produces the correct chart below with the readable x-axis:

enter image description here

duancong7573
duancong7573 谢谢! 工作得很好。 非常感激。
接近 7 年之前 回复



来自文档似乎插件不支持数据作为字符串,也是为了生成一个时间序列,你需要使用时间戳并包含时间插件: jquery.flot.time.js </ code> 。 </ p>

添加该js文件并对PHP代码进行以下更改以提供正确的数据:</ p>

  $ lineset [] = array  (strtotime($ lrow ['metric_date'])* 1000,(int)$ lrow ['metric_value']); 
</ code> </ pre>
</ div>

展开原文

原文

From the documentation it seems that the plugin doesn't support data as strings, also to produce a time series you need to use timestamps and include the time plugin: jquery.flot.time.js.

Add that js file and make the following change to your PHP code to supply the correct data:

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

duangang79177
duangang79177 我提交了一个编辑建议来扩展这个答案,但遭到拒绝:(
接近 7 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问