如何使用 AJAX 和 PHP 動態重繪 Google 圖表？

根據通過AJAX 請求的用戶輸入重新繪製Google 圖表

問題：

你想要根據下拉式選單中選定的表格動態更新Google 圖表，但在下列情況下遇到錯誤嘗試透過AJAX獲取數據。

解決方案：

要使用 AJAX 和外部資料正確重繪圖表，請考慮以下步驟：

1。 PHP 中的資料準備 (getdata.php)：

• 使用 PHP 從資料庫取得資料並處理 AJAX 請求。
• 以 JSON 格式回顯數據，即與Google的數據表相容。
• 確保適當的列標籤、類型和資料結構。

範例：

<?php require("dbconnect.php");

$db = mysql_connect($server, $user_name, $password);
mysql_select_db($database);

$sqlQuery = "SELECT * FROM ".$_GET['q']." WHERE Date(Time + INTERVAL 10 HOUR) = Date(UTC_TIMESTAMP() + INTERVAL 10 HOUR)";
$sqlResult = mysql_query($sqlQuery);

$rows = array();
$table = array();

$table['cols'] = array(
    array('label' => 'Time', 'type' => 'string'),
    array('label' => 'Wind_Speed', 'type' => 'number'),
    array('label' => 'Wind_Gust', 'type' => 'number')
);

while ($row = mysql_fetch_assoc($sqlResult)) {
  $temp = array();
  $temp[] = array('v' => (string) $row['Time']);
  $temp[] = array('v' => (float) $row['Wind_Speed']);
  $temp[] = array('v' => (float) $row['Wind_Gust']);
  $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;

echo json_encode($table);
?>

2. HTML/JavaScript 中的AJAX 要求：

2. HTML/JavaScript 中的AJAX 要求：

• 使用jQuery AJAX 從getdata.php 端點取得資料並處理回應。

成功後，建立一個資料表並使用Google Visualization 繪製圖表API.

範例：

<script type="text/javascript">
google.load('visualization', '1', {callback: function() {
  $("#users").change(drawChart);

  function drawChart() {
    $.ajax({
      url: 'getdata.php',
      data: 'q=' + $("#users").val(),
      dataType: 'json',
      success: function(responseText) {
        var data = new google.visualization.DataTable(responseText);
        new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {
          curveType: 'none',
          title: 'Wind Chart',
          titleTextStyle: {color: 'orange'},
          interpolateNulls: 1
        });
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown + ': ' + textStatus);
      }
    });
  }
}});
</script>

註：避免使用async: false在 AJAX 請求中，因為它可以阻止在圖表選項物件中只移動一次 hAxis 和 vAxis 選項。 確保您在 HTML 中為 onchange 事件處理程序使用正確的選擇器。

以上是如何使用 AJAX 和 PHP 動態重繪 Google 圖表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！