ホームページ >バックエンド開発 >PHPチュートリアル >ドロップダウン メニューからのユーザー入力に基づいて AJAX を使用して Google チャートを動的に更新するにはどうすればよいですか?
ドロップダウン メニューからのユーザー入力に基づいて AJAX を使用して Google チャートを動的に更新するにはどうすればよいですか?
- Linda Hamiltonオリジナル
- 2024-12-07 16:10:16589ブラウズ
AJAX を介したユーザー入力に基づく Google チャートの更新
問題
現在、Google チャートは、 GETリクエスト。目標は、ドロップダウン メニューからのユーザーの選択に基づいて、AJAX 経由でこのチャートを動的に更新することです。
分析
中心的な問題は、AJAX 更新に対するチャートからの応答の欠如によって発生します。 。 JSON 形式の不一致により、Google がグラフを表示できない可能性があります。
解決策
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();
// Define column labels
$table['cols'] = array(
array('label' => 'Time', 'type' => 'string'),
array('label' => 'Wind_Speed', 'type' => 'number'),
array('label' => 'Wind_Gust', 'type' => 'number')
);
// Populate data rows
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);
?>
HTML/JavaScript:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Wind Graph</title>
<script src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
google.load('visualization', '1', {
callback: function () {
// Add event listener to select element
$("#users").change(drawChart);
function drawChart() {
$.ajax({
url: 'getdata.php',
// Use value from select element
data: 'q=' + $("#users").val(),
dataType: 'json',
success: function (responseText) {
// Use response from PHP for data table
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);
}
});
}
},
packages: ['corechart']
});
</script>
</head>
<body>
主な違い:
- getdata.php スクリプトは、Google と互換性のある JSON 形式でデータを返すようになりました。チャート。
- hAxis と vAxis は、チャート オプションで 2 回指定されるのではなく、1 回だけ指定されます。
- 予期しない動作を防ぐために、async: false オプションは削除されました。
- インライン イベント ハンドラーは使用されず、代わりに jQuery 変更リスナーが追加されます。
以上がドロップダウン メニューからのユーザー入力に基づいて AJAX を使用して Google チャートを動的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。