doublestar2014 2013-10-10 01:02
浏览 105
已采纳

使用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条回答 默认 最新

  • dongshao4207 2013-10-10 07:25
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 电脑开机过商标后就直接这样,求解各位
  • ¥15 mysql , 用自己创建的本地主机和用户名 登录不上
  • ¥15 关于#web项目#的问题,请各位专家解答!
  • ¥15 vmtools环境不正常
  • ¥15 请问如何在Ubuntu系统中安装使用microsoft R open?
  • ¥15 jupyter notebook
  • ¥30 informer时间序列预测
  • ¥20 SSR引物多态性分析
  • ¥15 大漠插件在Win11易语言注册调用和免注册灵异事件,VS上注册调用完全没问题
  • ¥15 Addressable缓存机制做热更新的问题