Javascript 使用FLOT和PHP从MySQL打印数据_Javascript_Php_Mysql_Flot

Javascript 使用FLOT和PHP从MySQL打印数据

javascript php mysql

Javascript 使用FLOT和PHP从MySQL打印数据,javascript,php,mysql,flot,Javascript,Php,Mysql,Flot,我想将AJAX与FLOT结合使用，以便从MySQL数据库中绘制一些数据。我编写了下面的代码来从数据库中获取数据，并使用FLOT进行绘图，但有些地方工作不正常。非常感谢您为我们提供的任何帮助 <?php require 'database_connect.php'; try { $sql = "SELECT ts, COUNT(*) FROM tablename WHERE time IS NOT NULL and ts > ( NOW() - INTERVAL 5 MINUTE)

我想将AJAX与FLOT结合使用，以便从MySQL数据库中绘制一些数据。我编写了下面的代码来从数据库中获取数据，并使用FLOT进行绘图，但有些地方工作不正常。非常感谢您为我们提供的任何帮助

<?php

require 'database_connect.php';

try
{
$sql = "SELECT ts, COUNT(*) FROM tablename WHERE time IS NOT NULL and ts > ( NOW() - INTERVAL 5 MINUTE)";
$result = $pdo->query($sql);
}
catch (PDOException $e)
{
$error = 'databaseQuery.php - Database access failed: ' . $e->getMessage();
include 'error.html.php';
exit();
}

while ($row = $result->fetch())
{
$five_mins[] = $row;
}

include 'databaseQuery.html.php';

$pdo = null; // Disconnect from the database server.

?>

数据库查询正确地从我的数据库中提取UTC时间戳作为元素0和整数作为元素1

为了在网页中显示数字，我使用以下简短代码：

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Real-Time Metrics</title>
 </head>

  <?php
    foreach ($five_mins as $fm):
    echo "<p>Here are the results for 5 minutes of actions 0: " . $fm[0] . "</p>";
    echo "<p>Here are the results for 5 minutes of actions 1: " . $fm[1] . "</p>";
  ?>

  <?php endforeach; ?>

</html>

  <!DOCTYPE html>
    <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Real-Time Metrics</title>

  <link href="css/flot.css" rel="stylesheet" type="text/css">
  <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
  <script language="javascript" type="text/javascript" src="flot/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.time.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jshashtable-3.0.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.numberformatter-1.2.4.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.symbol.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.axislabels.js"></script>

<script>

// Options for plotting
          var options = {
           series: {
            lines: {
             show: true,
             lineWidth: 1.2,
             fill: true
            }
           },
           xaxis: {
            mode: "time",
            tickSize: ["2", "second"],
            tickFormatter: function (v, axis) {
             var date = new Date(v);
             if (date.getSeconds() % 20 == 0) {
              var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
              var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
              var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
              return hours + ":" + minutes + ":" + seconds;
             } else {
              return "";
             }
            },
           axisLabel: "Local Time",
           axisLabelUseCanvas: true,
           axisLabelFontSizePixels: 14,
           axisLabelFontFamily: 'Verdana, Arial',
           axisLabelPadding: 10
           },
           yaxis: {
            min: 0,
            max: 100,
            tickSize: 5,
            tickFormatter: function (v, axis) {
             if (v % 10 == 0) {
              return v;
             } else {
              return "";
             }
            },
            axisLabel: "Actions",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 14,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
           },
           legend: {
            labelBoxBorderColor: "#fff"
           },
          };

// End of the plot options

// Begin plot

 $(document).ready(function(){
  var callAjax = function(){
   $.ajax({
    method:'get',
    url:'php/databaseQuery.php',
    cache: false,
    success:function(results){
     dataset = [{ label: "ACTIONS", data: results }];
     $.plot($("#placeholder"), dataset, options);
    }
   });
  }
  callAjax();
  setInterval(callAjax,3000);
 });
</script>

<body>
<div id="header">
 <h2>Real-time Metrics</h2>
</div>
 <div id="content">
  <div class="container">
   <div id="placeholder" class="placeholder"></div>
  </div>
 </div>
</body>

</html>

我已尝试使用以下代码绘制数据：

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Real-Time Metrics</title>
 </head>

  <?php
    foreach ($five_mins as $fm):
    echo "<p>Here are the results for 5 minutes of actions 0: " . $fm[0] . "</p>";
    echo "<p>Here are the results for 5 minutes of actions 1: " . $fm[1] . "</p>";
  ?>

  <?php endforeach; ?>

</html>

  <!DOCTYPE html>
    <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Real-Time Metrics</title>

  <link href="css/flot.css" rel="stylesheet" type="text/css">
  <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
  <script language="javascript" type="text/javascript" src="flot/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.time.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jshashtable-3.0.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.numberformatter-1.2.4.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.symbol.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.axislabels.js"></script>

<script>

// Options for plotting
          var options = {
           series: {
            lines: {
             show: true,
             lineWidth: 1.2,
             fill: true
            }
           },
           xaxis: {
            mode: "time",
            tickSize: ["2", "second"],
            tickFormatter: function (v, axis) {
             var date = new Date(v);
             if (date.getSeconds() % 20 == 0) {
              var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
              var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
              var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
              return hours + ":" + minutes + ":" + seconds;
             } else {
              return "";
             }
            },
           axisLabel: "Local Time",
           axisLabelUseCanvas: true,
           axisLabelFontSizePixels: 14,
           axisLabelFontFamily: 'Verdana, Arial',
           axisLabelPadding: 10
           },
           yaxis: {
            min: 0,
            max: 100,
            tickSize: 5,
            tickFormatter: function (v, axis) {
             if (v % 10 == 0) {
              return v;
             } else {
              return "";
             }
            },
            axisLabel: "Actions",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 14,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
           },
           legend: {
            labelBoxBorderColor: "#fff"
           },
          };

// End of the plot options

// Begin plot

 $(document).ready(function(){
  var callAjax = function(){
   $.ajax({
    method:'get',
    url:'php/databaseQuery.php',
    cache: false,
    success:function(results){
     dataset = [{ label: "ACTIONS", data: results }];
     $.plot($("#placeholder"), dataset, options);
    }
   });
  }
  callAjax();
  setInterval(callAjax,3000);
 });
</script>

<body>
<div id="header">
 <h2>Real-time Metrics</h2>
</div>
 <div id="content">
  <div class="container">
   <div id="placeholder" class="placeholder"></div>
  </div>
 </div>
</body>

</html>

但是有些地方工作不正常，这会缩小范围。在AJAX成功处理程序中，向我们展示结果。如果不查看您的数据示例，则无法回答此问题。快速浏览一下，您的日期时间看起来不是毫秒而是秒，请尝试选择ts*1000.Dagon-我感谢您抽出时间阅读我的问题，但是，您的回答没有帮助。请将您的回答限制在会进一步推动问题的事情上，而不仅仅是批评。马克-谢谢您的帮助！数据来自MySQL数据库，其中第一列ts是MySQL在行更改时创建的UNIX时间戳。第二段数据是一个整数。