AJAX とユーザーが選択したテーブルを使用して Google チャートを動的に再描画する方法

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

目標は、選択したテーブルから取得したデータで Google チャートをシームレスに更新することですAJAX を使用したドロップダウン メニュー。ただし、jQuery $ 関数が定義されていないため、エラーが発生します。

問題分析:

元のコードは、URL で GET リクエストを使用して、チャート。ただし、データを AJAX 経由で動的に取得する必要がある場合、スクリプト構造を変更しないと必要なデータにアクセスできません。

ソリューションの実装:

1. ウェブページ変更:

   • ドロップダウン メニューを追加して、目的のテーブルを選択します。
   • AJAX データ取得をトリガーするために、選択変更イベントにイベント リスナーをアタッチします。

2. AJAXリクエスト:

   • 指定された PHP ファイル getdata.php から必要なデータを取得する AJAX リクエストを実装します。
   • PHP ファイルからの応答がGoogle チャートで受け入れられる形式（例） JSON.

3. PHP ファイル (getdata.php):

   • AJAX リクエストから選択されたテーブル名を取得します。
   • データベーステーブルからデータを取得し、Google が指定する形式にフォーマットします。チャートは解釈できます (JSON など)。
   • フォーマットされたデータを JSON 形式で出力します。

4. チャート再描画ロジック:

   • AJAX リクエストから取得したデータを使用して、新しい Google Visualization DataTable。
   • Google Visualization のdraw() メソッドを使用して、新しいデータでグラフを更新します。

追加の考慮事項:

• 最新の JavaScript フレームワークを使用することをお勧めします。より効率的なコード構成。
• セキュリティを強化するには、MySQL を直接呼び出す代わりにサーバー側のデータベース ドライバーを使用することを検討してください。

例コード:

HTML/JavaScript:

$(document).ready(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);
      }
    });
  }
});

PHP (getdata.php):

<?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);
?>

以上がAJAX とユーザーが選択したテーブルを使用して Google チャートを動的に再描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。