个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 05:50:13 25 4
gpt4 key购买 nike

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

我需要有关如何使用 google 面积图显示历史数据的帮助，数据从 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 时，页面显示为空白(无)

这是模组的代码:

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

最佳答案

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

将图表绘制代码移动到 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 charts library上面添加...

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

关于php - Google Chart Area 不显示 mysql 数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55102944/

25 4 0
文章推荐： java - VTD-XML:如何获取当前元素的标签名称？
文章推荐： ios - 处理统一类型标识符以显示给用户
文章推荐： mysql - SQL - 选择值成为列值？
文章推荐： mysql - 考虑到某些数据可以重叠，计算受限于某些数据的范围内的天数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com