du13932014807 2012-06-28 16:24
浏览 80
已采纳

将时间戳放在Flotr2折线图中的x轴上

I am fairly new to Flotr2 and I have just been building some simple line graphs. That is simple enough and very cool. However, I need to put a timestamp (month day year plus time of day) as my x axis. I am getting the time from my database so its in php code and I am just echoing out the data like so:

while($stmt11->fetch()){
                echo " [" . $date_of_completion . ", " . $score . "]";
                echo ",";
                $i++;
                $total_score += $score;
            }
            echo "];";

And I have made the mode of the xaxis be "time" and I've tried "date", and it just never works. It keeps putting everything between 2001-2002 which is completely wrong, so I assume it just doesn't know what to do with the data I've given it. Has anyone else encountered this problem? I've looked through the example they give on time, but it makes no sense to me.

Any help at all would be really appreciated. Thanks

EDIT Ok here is some more code. This is exactly what I'm doing to get the data out of the php and convert it to the format that flotr2 wants.

if(!($stmt11 = $mysqliprivate->prepare("SELECT date_of_completion, score FROM ". $shs . " WHERE id = ? ORDER BY date_of_completion ASC"))){
            echo "Prepare Failed: (" . $mysqliprivate->errno . ") " . $mysqliprivate->error;
        }
        else{
            $total_score = 0;
            $stmt11->bind_param("s", $id);
            $stmt11->execute();
            $stmt11->bind_result($date_of_completion, $score);
            $time = time();

            echo "var dataset = [";
            $i = 0;
            while($stmt11->fetch()){
                $date = date("U", strtotime($date_of_completion));
                echo " [" . $date . ", " . $score . "]";
                echo ",";
                $i++;
            }
            echo "];";
            $stmt11->close();
        }

And here is the javascript that I am running:

graph = Flotr.draw(container, [ 
            { data : dataset, label : 'Historical Patient Scores', lines:{show:true}, points: {show:true}}
            ], {
            xaxis: {
                minorTickFreq: 4,
                title : 'Date of Completion',
                tickDecimals: 0,
                noTicks: 10,
                mode : 'time',
                timeformat : '%y/%m/%d'
            }, 
            yaxis : {
                max : 30,
                title : 'Score',
                tickDecimals:0,
                min: 0
            },
            grid: {
                minorVerticalLines: true

            },
            legend : {
                position : 'nw'
            },
            mouse: {
                track: true,
                relative:true,
                trackDecimals:0,
                sensibility: 5
            }
        });
    })(document.getElementById("editor-render-0"));
  • 写回答

3条回答 默认 最新

  • donglan9651 2012-06-29 19:50
    关注

    Ok so after @Chase and I have been trying to get this to work for a while, I think I got it. I hacked together my own tickFormatter function. There really wasn't much documentation for it, but some simple javascript knowledge was enough for it. So to get the epoch time I just did this:

                        echo "var dataset = [";
                $i = 0;
                while($stmt11->fetch()){
                                $temp = strtotime($date_of_completion);
                                echo " [" . $temp . ", " . $score . "]";
                    echo ",";
                         }
                echo "];";
                $stmt11->close();
    

    Then to get the time to show up properly instead of it just being crazy numbers this is what I hacked together:

    xaxis: {
                    minorTickFreq: 4,
                    title : 'Date of Completion',
                    tickDecimals: 0,
                    noTicks: 20,
    
                    mode : 'time',
                    labelsAngle : 45,
                    tickFormatter: function(x){
                        var x = parseInt(x);
                        var myDate = new Date(x*1000);
                        var string = myDate.getFullYear();
                        string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
                        result = string;
                        return string;
                    }
    
    
                }, 
    

    and then if you want the mouse-over to produce the same results put this code inside the mouse thing:

    mouse: {
                    track: true,
                    relative:true,
                    trackDecimals:0,
                    sensibility: 5,
                    trackFormatter: function(o){
                        var t = parseInt(o.x);
                        var myDate = new Date(t*1000);
                        var string = myDate.getFullYear();
                        string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
                        return string + ", " + o.y;
                    }
                }
    

    All of the rest of the javascript and php remain the same as in my original question at the top.

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

报告相同问题?

悬赏问题

  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn,请教个问题 flink启动yarn-session.sh连不上hadoop,这个整了好几天一直不行,求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型,搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热(温度不同)的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥30 python代码,帮调试,帮帮忙吧