AJAX と PHP を使用して Google チャートを動的に再描画する方法-PHPチュートリアル-php.cn

AJAX と PHP を使用して Google チャートを動的に再描画する方法

Susan Sarandon

リリース： 2024-12-05 14:02:17

オリジナル

523 人が閲覧しました

How to Redraw a Google Chart Dynamically Using AJAX and PHP?

AJAX リクエストによるユーザー入力に基づいて Google チャートを再描画

問題:

ドロップダウンメニューから選択したテーブルに基づいて Google グラフを動的に更新しようとしましたが、試行中にエラーが発生しました

解決策:

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 リクエスト:

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>

ログイン後にコピー

注: