时间戳

首页 > 解决方案 > Google Chart Area 不显示 mysql 数据库

php - Google Chart Area 不显示 mysql 数据库

问题描述

我正在使用树莓派 pi3 灯服务器来显示来自一个 AM2302 传感器的数据。我有一个从传感器读取值并以 json 格式显示的 php 文件。

我需要有关如何使用谷歌面积图显示历史数据的帮助，数据是从 python 程序中读取的，并且每隔一分钟存储到 mysql 数据库中。

这是读取数据的文件，称为：read_sensors.php（从传感器收集数据的文件）。

<?php
// Settings
// host, user and password settings
$host = "localhost";
$user = "logger";
$password = "password";
$database = "temperatures";

// make connection to database
$connectdb = mysqli_connect($host,$user,$password)
or die ("Cannot reach database");

// select db
mysqli_select_db($connectdb,$database)
or die ("Cannot select database");

// sql command that selects all entires from current time and X hours backward
$sql= "SELECT temperature, humidity, sensor, dateandtime FROM temperaturedata where sensor = 'Exterior' order by dateandtime desc LIMIT 10";

// set query to variable
$temperatures = mysqli_query($connectdb,$sql);

// create content to web page
?>

<?php
// loop all the results that were read from database and "draw" to web page

$temps = [];
while($temperature = mysqli_fetch_assoc($temperatures)) {
    $temps[] = $temperature;
}

echo json_encode($temps);;
?>

它向我展示了以下结果：

[
    {"temperature":"26.8","humidity":"82.2","sensor":"Exterior","dateandtime":"2019-03-11 09:21:02"},
    {"temperature":"26.8","humidity":"83.7","sensor":"Exterior","dateandtime":"2019-03-11 09:20:01"},
    {"temperature":"26.8","humidity":"82.8","sensor":"Exterior","dateandtime":"2019-03-11 09:19:01"},
    {"temperature":"26.8","humidity":"82.7","sensor":"Exterior","dateandtime":"2019-03-11 09:18:01"},
    {"temperature":"27","humidity":"82.6","sensor":"Exterior","dateandtime":"2019-03-11 09:17:01"},
    {"temperature":"27.2","humidity":"83","sensor":"Exterior","dateandtime":"2019-03-11 09:16:02"},
    {"temperature":"27.2","humidity":"83.1","sensor":"Exterior","dateandtime":"2019-03-11 09:15:01"},
    {"temperature":"27.1","humidity":"82.8","sensor":"Exterior","dateandtime":"2019-03-11 09:14:02"},
    {"temperature":"27.1","humidity":"82.9","sensor":"Exterior","dateandtime":"2019-03-11 09:13:01"},
    {"temperature":"27","humidity":"82.8","sensor":"Exterior","dateandtime":"2019-03-11 09:12:01"}
]

这是我的 index.php 文件的代码：

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src =
"https://www.gstatic.com/charts/loader.js">
      </script>

      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.

var dataArea = new google.visualization.DataTable();
dataArea.addColumn('string', 'Date');
dataArea.addColumn('number', 'Temperature');
dataArea.addColumn('number', 'Humidity');

var options = {title: 'Company Performance',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };

$.ajax({
  url: "read_sensors.php",
  dataType: 'json'
}).done(function (data) {
  $.each(data, function (index, row) {
    dataArea.addRow([
      row.dateandtime,
      parseFloat(row.temperature),
      parseFloat(row.humidity)
    ]);
  });
});


var chartArea = new
google.visualization.AreaChart(document.getElementById("chart_area"));

chartArea.draw(dataArea);

}
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

在我访问 index.php 的这些时刻，页面显示为空白（无）

这是带有mod的代码：

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://www.gstatic.com/charts/loader.js"></script>
      </script>
      <script type = "text/javascript">
      </script>
   </head>

   <body>
      <div id = "chart_area" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.

var dataArea = new google.visualization.DataTable();
dataArea.addColumn('string', 'Date');
dataArea.addColumn('number', 'Temperature');
dataArea.addColumn('number', 'Humidity');

var options = {title: 'Company Performance',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };


$.ajax({
  url: "read_sensors.php",
  dataType: 'json',
}).done(function (data) {
  complete: function(data) {
    $.each(data, function(index, row) {
      dataArea.addRow([
        row.dateandtime,
        parseFloat(row.temperature),
        parseFloat(row.humidity)
      ]);
    });
    var chartArea = new google.visualization.AreaChart(document.getElementById("chart_area"));
    chartArea.draw(dataArea);
  }
});

}
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

标签： phppythonmysqlchartsgoogle-visualization

解决方案

在添加数据之前绘制图表。

将图表绘制代码移动到 ajax 完成回调中... 

$.ajax({
  url: "read_sensors.php",
  dataType: 'json'
}).done(function (data) {
  $.each(data, function (index, row) {
    dataArea.addRow([
      row.dateandtime,
      parseFloat(row.temperature),
      parseFloat(row.humidity)
    ]);
  });

  var chartArea = new
  google.visualization.AreaChart(document.getElementById("chart_area"));

  chartArea.draw(dataArea, options);
});

此外，<div>元素的 id 需要与图表的 id 匹配。

将 id 更改为"chart_area", 这里... 

  <div id="chart_area" style="width: 550px; height: 400px; margin: 0 auto">
  </div>

您可能还需要将该load语句移动到与回调相同的部分... 

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);

还需要在页面中添加jquery，可以在google图表库上方添加... 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

以下是建议的编辑... 

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://www.gstatic.com/charts/loader.js"></script>
   </head>

   <body>
      <div id="chart_area" style="width: 550px; height: 400px; margin: 0 auto"></div>
      <script>
        function drawChart() {
          var dataArea = new google.visualization.DataTable();
          dataArea.addColumn('string', 'Date');
          dataArea.addColumn('number', 'Temperature');
          dataArea.addColumn('number', 'Humidity');

          var options = {
            title: 'Company Performance',
            hAxis: {
              title: 'Year',
              titleTextStyle: {color: '#333'}
            },
            vAxis: {minValue: 0}
          };

          $.ajax({
            url: "read_sensors.php",
            dataType: 'json',
          }).done(function (data) {
            $.each(data, function(index, row) {
              dataArea.addRow([
                row.dateandtime,
                parseFloat(row.temperature),
                parseFloat(row.humidity)
              ]);
            });
            var chartArea = new google.visualization.AreaChart(document.getElementById("chart_area"));
            chartArea.draw(dataArea);
          });
        }
        google.charts.load('current', {packages: ['corechart']});
        google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

推荐阅读