通过AJAX请求重新绘制基于用户输入的Google图表 [英] Redraw google chart based on user input via AJAX request
本文介绍了通过AJAX请求重新绘制基于用户输入的Google图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个谷歌图表从我的数据库中提取数据，按照我的要求工作。根据URL中的获取请求，它从所选表格中提取数据。
我想通过基于选定表格的ajax从下拉菜单。我无法突破的部分是通过ajax获得数据响应。我认为下面的代码是接近的，但我得到了我似乎无法摆脱的下面的错误。
getdata.php：22未捕获的ReferenceError：$未定义drawVisualization @ getdata.php：22onchange @ getdata.php：47
我尝试从getdata.php中删除GET请求，并认为这是$未定义的硬编码表，但这并未解决错误。
工作图代码
<！DOCTYPE>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title>
风图
< / title>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['corechart']}）;
< / script>
< script type =text / javascript>
function drawVisualization（）{
var data = new google.visualization.DataTable（）;
<？php
require（dbconnect.php）;
echodata.addColumn（'string'，'Time'）;;
echodata.addColumn（'number'，'Wind_Speed'）;;
echodata.addColumn（'number'，'Wind_Gust'）;;
$ 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）;
while（$ row = mysql_fetch_assoc（$ sqlResult））{
echo'data.addRow（['{$ row ['Time']}'，{v：{$ row [ 'Wind_Speed']}，f：'{$ row ['Wind_Speed']}'}，{v：{$ row ['Wind_Gust']}，f：'{$ row ['Wind_Gust']}'}]） ;;
}
？>
//创建并绘制可视化文件。
new google.visualization.LineChart（document.getElementById（'visualization'））。
draw（data，{curveType：none，
title：AU0001 Wind Chart，
titleTextStyle：{color：orange}，
// width：800 ，高度：400，
// vAxis：{maxValue：10}，
vAxis：{minValue：0}，
vAxis：{title：'Wind Speed（Knots）'}，
vAxis：{baseline：0}，
vAxis：{gridlines：{count：10}}，
vAxis：{title：Wind Speed（Knots），titleTextStyle：{color：橙色}}，
hAxis：{title：Time，titleTextStyle：{color：orange}}，
interpolateNulls：1
}
）;
}
google.setOnLoadCallback（drawVisualization）;
< / script>
< / head>
< body>
< div id =visualizationstyle =width：100％; height：400px;>< / div>
< / body>
< / html>
带有AJAX请求的新代码
<！DOCTYPE>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title>
风图
< / title>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['corechart']}）;
< / script>
< script type =text / javascript>
函数drawVisualization（num）{
var data = new google.visualization.DataTable（TableData）;
var TableData = $ .ajax（{
url：getdata.php，
data：q =+ num，
dataType：json，
async：false
}）。responseText;
//创建并绘制可视化文件。
new google.visualization.LineChart（document.getElementById（'visualization'））。
draw（data，{curveType：none，
title：Wind Chart，
titleTextStyle：{color：orange}，
// width：800，身高：400，
// vAxis：{maxValue：10}，
vAxis：{minValue：0}，
vAxis：{title：'Wind Speed（Knots）'}，
vAxis：{baseline：0}，
vAxis：{gridlines：{count：10}}，
vAxis：{title：Wind Speed（Knots），titleTextStyle：{color：orange }}，
hAxis：{title：Time，titleTextStyle：{color：orange}}，
interpolateNulls：1
}
）;
}
// google.setOnLoadCallback（drawVisualization）;
< / script>
< / head>
< body style =font-family：Arial; border：0 none;>
< form>
< select name =usersonchange =drawVisualization（this.value）>
< option value =>选择单位：< / option>
< option value =0001> 0001< / option>
< option value =0002> 0002< / option>
< / select>
< / form>
< div id =visualizationstyle =width：100％; height：400px;>< / div>
< / body>
< / html>
getdata.php代码
<？php
require（dbconnect.php）;
echodata.addColumn（'string'，'Time'）;;
echodata.addColumn（'number'，'Wind_Speed'）;;
echodata.addColumn（'number'，'Wind_Gust'）;;
$ 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）;
while（$ row = mysql_fetch_assoc（$ sqlResult））{
echo'data.addRow（['{$ row ['Time']}'，{v：{$ row [ 'Wind_Speed']}，f：'{$ row ['Wind_Speed']}'}，{v：{$ row ['Wind_Gust']}，f：'{$ row ['Wind_Gust']}'}]） ;;
}
？>
解决方案
推荐使用php来获取json， em> google接受
以下是使用ajax从php获取json数据并绘制谷歌图表的完整示例
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）;
}
$表['rows'] = $ rows;
echo json_encode（$ table）;
？>
并且不建议使用 - > async：false
或内联事件处理程序 - > < select name =usersonchange =drawVisualization（this.value）>
也应该只出现一次， hAxis 和 vAxis 在图表选项中
html / javascript
<！DOCTYPE>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title>
风图
< / 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'，{
// google-vis callback
callback：function（）{
// add event listener to select element
$（＃users）。change（drawChart）;
函数drawChart（）{
$ .ajax（{
url：'getdata.php'，
//使用select元素的值
data：'q ='+ $（＃users）。val（），
dataType：'json'，
成功：函数（responseText）{
//使用PHP对数据表的响应
var data = new google.visualization.DataTable（responseText）;
new google.visualization.LineChart（document.getElementById '$'
curve（'data'，'$'）
title'：Wind Chart'，
titleTextStyle：{
color：'橙子'
}，
interpolateNulls：1
}）;
}，
错误：函数（jqXHR，textStatus，errorThrown）{
console.log（errorThrown +'：'+ textStatus）;
}
}）;
}
}，
packages：['corechart']
}）;
< / script>
< / head>
< body style =font-family：Arial; border：0 none;>
< form>
< select id =users>
< option value =选择禁用>选择单位：< / option>
< option value =0001> 0001< / option>
< option value =0002> 0002< / option>
< / select>
< / form>
< div id =visualizationstyle =width：100％; height：400px;>< / div>
< / body>
< / html>
I have a google chart pulling data from my database that works as I want it to. Based on a get request in the URL it draws the data from the selected table.
I want make this chart update via ajax based on a selected table from a drop down menu. The part I can't break through on is getting the data to be responsive via ajax. I think the below code is close, but I'm getting the below error that I can't seem to get rid of.
getdata.php:22 Uncaught ReferenceError: $ is not defineddrawVisualization @ getdata.php:22onchange @ getdata.php:47
I tried removing the GET request from the getdata.php and hard coding a table in thinking that was the $not defined, but that didn't resolve the error.
Working Graph Code
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Wind Graph
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
<?php
require("dbconnect.php");
echo " data.addColumn('string', 'Time');";
echo " data.addColumn('number', 'Wind_Speed');";
echo " data.addColumn('number', 'Wind_Gust');";
$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);
while ($row = mysql_fetch_assoc($sqlResult)) {
echo " data.addRow(['{$row['Time']}', {v: {$row['Wind_Speed']}, f: '{$row['Wind_Speed']}' }, {v: {$row['Wind_Gust']}, f: '{$row['Wind_Gust']}' } ]); ";
}
?>
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "none",
title: "AU0001 Wind Chart",
titleTextStyle: {color: "orange"},
//width: 800, height: 400,
//vAxis: {maxValue: 10},
vAxis: {minValue: 0},
vAxis: {title: 'Wind Speed (Knots)'},
vAxis: {baseline: 0},
vAxis: {gridlines: {count: 10} },
vAxis: {title: "Wind Speed (Knots)", titleTextStyle: {color: "orange"}},
hAxis: {title: "Time", titleTextStyle: {color: "orange"}},
interpolateNulls: 1
}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 100%; height: 400px;"></div>
</body>
</html>
New code with AJAX request
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Wind Graph
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization(num) {
var data = new google.visualization.DataTable(TableData);
var TableData = $.ajax({
url: "getdata.php",
data: "q="+num,
dataType:"json",
async: false
}).responseText;
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "none",
title: "Wind Chart",
titleTextStyle: {color: "orange"},
//width: 800, height: 400,
//vAxis: {maxValue: 10},
vAxis: {minValue: 0},
vAxis: {title: 'Wind Speed (Knots)'},
vAxis: {baseline: 0},
vAxis: {gridlines: {count: 10} },
vAxis: {title: "Wind Speed (Knots)", titleTextStyle: {color: "orange"}},
hAxis: {title: "Time", titleTextStyle: {color: "orange"}},
interpolateNulls: 1
}
);
}
// google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<form>
<select name="users" onchange="drawVisualization(this.value)">
<option value="">Select unit:</option>
<option value="0001">0001</option>
<option value="0002">0002</option>
</select>
</form>
<div id="visualization" style="width: 100%; height: 400px;"></div>
</body>
</html>
getdata.php code
<?php
require("dbconnect.php");
echo " data.addColumn('string', 'Time');";
echo " data.addColumn('number', 'Wind_Speed');";
echo " data.addColumn('number', 'Wind_Gust');";
$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);
while ($row = mysql_fetch_assoc($sqlResult)) {
echo " data.addRow(['{$row['Time']}', {v: {$row['Wind_Speed']}, f: '{$row['Wind_Speed']}' }, {v: {$row['Wind_Gust']}, f: '{$row['Wind_Gust']}' } ]); ";
}
?>
解决方案
recommend using php to get json in the form that google accepts
following is a full example for using ajax to get json data from php and draw a google chart
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);
?>
and do not recommend using --> async: false
or inline event handlers --> <select name="users" onchange="drawVisualization(this.value)">
also, hAxis and vAxis should only appear once in chart options
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', {
// google-vis callback
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 style="font-family: Arial;border: 0 none;">
<form>
<select id="users">
<option value="" selected disabled>Select unit:</option>
<option value="0001">0001</option>
<option value="0002">0002</option>
</select>
</form>
<div id="visualization" style="width: 100%; height: 400px;"></div>
</body>
</html>
这篇关于通过AJAX请求重新绘制基于用户输入的Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
