1

我是 PHP 和 Google 图表的新手。我正在尝试使用存储在 MYSL 数据库中的 arduino 数据制作谷歌图表。到目前为止，我成功地将数据从 arduino 插入到 mysql DB，但我在使用谷歌图表时遇到了困难。

这是我的PHP代码：

<?php


  $mysqli =mysqli_connect('localhost', 'root', '', 'Arduino');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}


  $sql = mysqli_query($mysqli, 'SELECT * FROM analoog0');

  if (!$sql) {
  die("Error running $sql: " . mysql_error());
  }



  $results = array();
  while($row = mysqli_fetch_assoc($sql))
{
   $results[] = array(
      'Date' => $row['Date'],
      'Time' => $row['Time'],
      'Temperature' => $row['Temperature']
   );
}
$json = json_encode($results, JSON_PRETTY_PRINT);
echo $json;

?>

这是 JSON 输出：

[ { "Date": "2013-10-24", "Time": "18:15:49", "Temperature": "24" }, 
{ "Date": "2013-10-24", "Time": "18:16:19", "Temperature": "24" }, 
{ "Date": "2013-10-24", "Time": "18:16:49", "Temperature": "24" }, 
{ "Date": "2013-10-24", "Time": "18:17:19", "Temperature": "23" } ]

最后是 HTM 代码：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "localhost/Charts/chart_ver2.php",
          dataType:"json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

当我运行 HTM 代码时，没有任何反应 - 屏幕保持空白。

任何帮助、指导或重定向将不胜感激！提前致谢！！

4

2 回答 2

6

您需要为 Visualization API 正确格式化数据。这应该以正确的格式放置您的数据：

$results = array(
    'cols' => array (
        array('label' => 'Date', 'type' => 'datetime'),
        array('label' => 'Temperature', 'type' => 'number')
    },
    'rows' => array()
);
while($row = mysqli_fetch_assoc($sql)) {
    // date assumes "yyyy-MM-dd" format
    $dateArr = explode('-', $row['Date']);
    $year = (int) $dateArr[0];
    $month = (int) $dateArr[1] - 1; // subtract 1 to make month compatible with javascript months
    $day = (int) $dateArr[2];

    // time assumes "hh:mm:ss" format
    $timeArr = explode(':', $row['Time']);
    $hour = (int) $timeArr[0];
    $minute = (int) $timeArr[1];
    $second = (int) $timeArr[2];

    $results['rows'][] = array('c' => array(
        array('v' => "Date($year, $month, $day, $hour, $minute, $second)"),
        array('v' => $row['Temperature'])
    ));
}
$json = json_encode($results, JSON_NUMERIC_CHECK);
echo $json;

在您的 javascript 中，我建议您重新安排处理 AJAX 查询的方式。你这样做的方式没有任何问题，但我认为这是一个更优雅的解决方案：

function drawChart() {
    $.ajax({
        url: 'localhost/Charts/chart_ver2.php',
        dataType: 'json',
        success: function (jsonData) {
            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, {width: 400, height: 240});
        }
    });
}
于 2013-10-24T16:23:30.600 回答
1

您不能将 .responseText 与 JSON 响应一起使用，据我所知，它仅适用于 XML 和 Text。 

$.ajax({
      url: "localhost/Charts/chart_ver2.php",
      dataType:"json",
      async: false
      }).responseText;

我会将其更改为：

 $.ajax({
      url: "localhost/Charts/chart_ver2.php",
      dataType:"json",
      async: false ,
      success: function(data) {
           jsonData = data;
       }
      });
于 2013-10-24T16:18:46.850 回答