Php 使用数组为Google日期时间图表绘图提供数据_Php_Arrays_Mysqli_Charts_Google Visualization

Php 使用数组为Google日期时间图表绘图提供数据

php arrays charts google-visualization

Php 使用数组为Google日期时间图表绘图提供数据,php,arrays,mysqli,charts,google-visualization,Php,Arrays,Mysqli,Charts,Google Visualization,我有通过MySQL检索的气象数据，可以通过phpMyAdmin查看。我试图绘制一些东西，但我在绘图中没有得到任何数据我的代码是 <?php // connect to database $conn = mysqli_connect('localhost', 'root', 'station', 'meteobridge'); // check connection if(!$conn){ echo 'Connection error: '

我有通过MySQL检索的气象数据，可以通过phpMyAdmin查看。我试图绘制一些东西，但我在绘图中没有得到任何数据

我的代码是

<?php
    // connect to database
    $conn = mysqli_connect('localhost', 'root', 'station', 'meteobridge');

    // check connection
    if(!$conn){
        echo 'Connection error: ' . mysqli_connect_error();
    }

    // write query for data
    $sql = 'SELECT ID,TempInCur,TempOutCur FROM mystation';
    $dateFormat = 'SELECT DateTime FROM mystation';

    // make query & get result
    $result = mysqli_query($conn, $sql);
    $dtresult = mysqli_query($conn, $dateFormat);

    // fetch the resulting rows as an array
    $dailyMeasurements = mysqli_fetch_all($result, MYSQLI_ASSOC);   
    $dtArray = mysqli_fetch_all($dtresult, MYSQLI_ASSOC);
?>

 <!DOCTYPE html>
 <html>
    <?php include('templates/header.php'); ?>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <script type="text/javascript">
              google.charts.load('current', {'packages':['corechart']});
              google.charts.setOnLoadCallback(drawChart);

              function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('datetime', 'Date');
                data.addColumn('number', 'TempIn');
                data.addColumn('number', 'TempOut');
                data.addRows([
                    [ <?php $dtArray[0]['DateTime'] ?>,  <?php echo $dailyMeasurements[0]['TempInCur'] ?>,<?php echo $dailyMeasurements[0]['TempOutCur'] ?>],
                    [ <?php $dtArray[1]['DateTime'] ?>,<?php echo $dailyMeasurements[1]['TempInCur'] ?>,<?php echo $dailyMeasurements[1]['TempOutCur'] ?>],
                    [ <?php $dtArray[2]['DateTime'] ?>,<?php echo $dailyMeasurements[2]['TempInCur'] ?>,<?php echo $dailyMeasurements[2]['TempOutCur'] ?>]
                ]);

                var options = {
                  title: 'Temperaturas',
                  //curveType: 'function',
                  legend: { position: 'bottom' }
                };

                var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
                chart.draw(data, options);
              }
            </script>
          <body>
            <div id="curve_chart" style="width: 900px; height: 500px"></div>
          </body>
    <?php include('templates/footer.php'); ?>
 </html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'datetime'，'Date'）；
data.addColumn（'number'，'TempIn'）；
data.addColumn（'number'，'TempOut'）；
data.addRows([
[ ,  ,],
[ ,,],
[ ,,]
]);
变量选项={
标题：“温度”，
//curveType:'函数'，
图例：{位置：'bottom'}
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（数据、选项）；
}

$dailymasurements[*]['TempOutCur']

的值为27.1，

$dailymasurements[*]['TempOutCur']

的值为28.7。

$dtArray[0]['DateTime']

的值是2020-12-27 16:58:262020-12-27 17:03:282020-12-27 17:08:31

我之所以只使用数组的前几个索引添加数据，是因为当我尝试使用整个数组（很久以前）时，在不了解问题的情况下会出现更多错误。我试着做一个简单的例子，作为一个初学者，我可以试着弄清楚到底发生了什么，出了什么问题。这使得我们甚至可以得到下面的无数据绘图的图像

如果你有办法将数组直接输入谷歌图表，那就更好了！我的意图是在我能够生成一个绘图之后，找出它。

我不确定，但你会得到一个关联数组。您应该将此数组转换为对象

const objDatas = JSON.parse($dtArray);

然后

它对我有效

我不确定，但你得到了一个关联数组。您应该将此数组转换为对象

const objDatas = JSON.parse($dtArray);

然后

它对我起作用了首先是sql。看起来所有列都来自同一个表，
那么为什么不把它们都包含在同一个查询中呢

从

$sql = 'SELECT ID,TempInCur,TempOutCur FROM mystation';
$dateFormat = 'SELECT DateTime FROM mystation';

到

接下来，在php中构建您的数组

  // make query & get result
  $result = mysqli_query($conn, $sql);

  $rows = array();
  while($row = mysqli_fetch_array($result)){
    $rows[] = array($row['DateTime'], $row['TempInCur'], $row['TempOutCur']);
  }

然后将其写入

addRows

方法中的页面

data.addRows(<?php echo json_encode($rows); ?>);

data.addRows（）；

请参阅以下代码段

<?php
  // connect to database
  $conn = mysqli_connect('localhost', 'root', 'station', 'meteobridge');

  // check connection
  if(!$conn){
      echo 'Connection error: ' . mysqli_connect_error();
  }

  // write query for data
  $sql = 'SELECT DateTime,TempInCur,TempOutCur FROM mystation';

  // make query & get result
  $result = mysqli_query($conn, $sql);

  $rows = array();
  while($row = mysqli_fetch_array($result)){
    $rows[] = array($row['DateTime'], $row['TempInCur'], $row['TempOutCur']);
  }
?>

<!DOCTYPE html>
<html>
  <?php include('templates/header.php'); ?>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Date');
        data.addColumn('number', 'TempIn');
        data.addColumn('number', 'TempOut');
        data.addRows(<?php echo json_encode($rows); ?>);

        var options = {
          title: 'Temperaturas',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
  <?php include('templates/footer.php'); ?>
</html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'datetime'，'Date'）；
data.addColumn（'number'，'TempIn'）；
data.addColumn（'number'，'TempOut'）；
data.addRows（）；
变量选项={
标题：“温度”，
图例：{位置：'bottom'}
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（数据、选项）；
}

首先是sql。看起来所有列都来自同一个表，
那么为什么不把它们都包含在同一个查询中呢

从

$sql = 'SELECT ID,TempInCur,TempOutCur FROM mystation';
$dateFormat = 'SELECT DateTime FROM mystation';

到

接下来，在php中构建您的数组

  // make query & get result
  $result = mysqli_query($conn, $sql);

  $rows = array();
  while($row = mysqli_fetch_array($result)){
    $rows[] = array($row['DateTime'], $row['TempInCur'], $row['TempOutCur']);
  }

然后将其写入

addRows

方法中的页面

data.addRows(<?php echo json_encode($rows); ?>);

data.addRows（）；

请参阅以下代码段

<?php
  // connect to database
  $conn = mysqli_connect('localhost', 'root', 'station', 'meteobridge');

  // check connection
  if(!$conn){
      echo 'Connection error: ' . mysqli_connect_error();
  }

  // write query for data
  $sql = 'SELECT DateTime,TempInCur,TempOutCur FROM mystation';

  // make query & get result
  $result = mysqli_query($conn, $sql);

  $rows = array();
  while($row = mysqli_fetch_array($result)){
    $rows[] = array($row['DateTime'], $row['TempInCur'], $row['TempOutCur']);
  }
?>

<!DOCTYPE html>
<html>
  <?php include('templates/header.php'); ?>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Date');
        data.addColumn('number', 'TempIn');
        data.addColumn('number', 'TempOut');
        data.addRows(<?php echo json_encode($rows); ?>);

        var options = {
          title: 'Temperaturas',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
  <?php include('templates/footer.php'); ?>
</html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'datetime'，'Date'）；
data.addColumn（'number'，'TempIn'）；
data.addColumn（'number'，'TempOut'）；
data.addRows（）；
变量选项={
标题：“温度”，
图例：{位置：'bottom'}
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（数据、选项）；
}

这个问题有进展吗？这个问题有进展吗？