0

我对 Google Chart 有两个问题。我的数据是通过 JSON 从 MySQL 导入的，我的代码如下。第一：我不知道如何交换x和y轴？第二：我试图在 X 轴日期（日期和时间）上呈现。老实说，这是我使用 Java 的第一步。感谢您的帮助。

我的数据库示例：

id      sensor  value1  reading_time    
581     SENS_1  96      2022-02-10 18:37:14
580     SENS_1  96      2022-02-10 18:27:12
579     SENS_1  95      2022-02-10 18:17:12
578     SENS_1  95      2022-02-10 18:07:11

我的代码（这里我使用 ID，因为当我尝试日期时，图表不会生成）：

    <!DOCTYPE html>

<?php
  $host = "localhost";               // host = localhost because database hosted on the same server where PHP files are hosted
  $dbname = "4tr4r3_esp_01";              // Database name
  $username = "4tr4r3_esp_01";      // Database username
  $password = "dasidsa8das9yd";         // Database password


// PHP Google Charts
$db_connection = mysqli_connect($host, $username, $password, $dbname);
$sql = "SELECT  value1, id FROM SensorData";
// Check if connection established successfully
if ($db_connection->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

else { echo "Connected to mysql database. <br>"; }

?>



 <html>
  <head>
  <meta charset="UTF-8">
    <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_val = google.visualization.arrayToDataTable([
        ['value1', 'id'],
        <?php
        $query_result = mysqli_query($db_connection,$sql);
        while($row_val = mysqli_fetch_array($query_result))
        {
        echo "['".$row_val['value1']."',".$row_val['id']."],";
        }
        ?>
        
        ]);


        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom',
          }
        };
        
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data_val, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

我试过这样的事情：

    function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Dato');
  data.addColumn('number', 'Anbefalet pris');

没有成功。预先感谢您的帮助！

4

0 回答 0