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

Question

我对Flotr2相当陌生，而且我刚刚构建了一些简单的线形图。这很简单，很酷。但是，我需要将时间戳（月份日年和时间）作为我的x轴。我正在从我的数据库中的时间，所以它在PHP代码，我只是呼应出的数据，像这样：

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

和我进行了x轴的模式是“时间”和我已经试过“日期“，它从来没有工作。它始终把2001年到2002年之间的所有事情都弄错了，所以我认为它只是不知道如何处理我提供的数据。有其他人遇到过这个问题吗？我浏览了他们按时发布的例子，但对我来说没有意义。

任何帮助都将非常感激。谢谢

编辑 好的，这里有一些代码。这正是我正在做的从php中获取数据并将其转换为flotr2所需的格式。

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(); 
     } 

这里是我运行的JavaScript：

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")); 

Answer 1

好了，所以@Chase后，我一直在努力得到这个工作了一段时间，我觉得我得到了它。 我把我自己的tickFormatter函数一起砍了。真的没有太多的文档，但一些简单的JavaScript知识就足够了。 因此得到了划时代的时间我只是做了这一点：

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

然后让时间来证明正确而不是仅仅是疯狂的数字，这是我砍死在一起：

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


      }, 

和那么，如果你想在鼠标悬停产生把这段代码鼠标里面的东西同样的结果：

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

所有的JavaScript和PHP的其余部分保持不变在我的原点在顶部有问题。

Answer 2

的time模式需要一个时间值，让你的日期转换为划时代的时间以毫秒为单位。有关如何将日期转换为纪元时间的信息，请参阅http://php.net/manual/en/function.date.php，并记住php使用秒（而不是像JavaScript和Flotr2那样的ms）。您还需要对x轴的timeformat设置为给定的格式，如：

  xaxis: { 
      mode: "time", 
      timeformat: "%m/%d/%y" 
     }, 

这将时间转换回：%m/%d/%y

传递的信号出现时间之后日期格式标签。

您可以使用以下方法：

%h: hours 
    %H: hours (left-padded with a zero) 
    %M: minutes (left-padded with a zero) 
    %S: seconds (left-padded with a zero) 
    %d: day of month (1-31), use %0d for zero-padding 
    %m: month (1-12), use %0m for zero-padding 
    %y: year (four digits) 
    %b: month name (customizable) 
    %p: am/pm, additionally switches %h/%H to 12 hour instead of 24 
    %P: AM/PM (uppercase version of %p) 

Answer 3

这里的问题很简单...为了使用内置的格式化程序，您必须在Javascript中传入日期对象。喜欢这个...

var dataArray = [[new Date('08/16/2012 03:40:15.000'),21.8917228040536], 
       [new Date('08/16/2012 03:40:15.000'),21.8917228040536]] 

看看你的最终呈现的JavaScript的线索 - PHP代码并没有明确这个问题。