根据用户通过AJAX请求输入的内容重新绘制Google图表
我有一个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-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>
带有AJAX请求的新代码
<!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代码
<?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']}' } ]); ";
}
?>
问题答案：
建议使用php以 Google接受 的形式获取json __
以下是使用ajax从php获取json数据并绘制Google图表的完整示例
的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);
?>
并且不建议使用-> async: false
或内联事件处理程序-><select name="users" onchange="drawVisualization(this.value)">
同时，hAxis和vAxis应该只出现一次图表选项
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答复加载时，它可以正常工作。如果我添加console.log（chart_data），我会看到默认数据，然后在提交后我会看到新数据。唯一的问题是图表不会再次绘制。我知道drawChart函数不会第二次运行，我只是不知道为什么。我假设是的话，图表将重绘。抱歉，答案很明显。我对jQuery / Ajax非常陌生。 任何帮助，将不胜感激。谢谢！ 问题答案： 您
-
问题内容： 如何通过 HTTPS* 发送ajax GET 请求？ * 抛出这个： 是否有其他方法或解决方法可以使此工作正常进行？ 如果我使用 Chrome 浏览到该网址，则可以得到响应。我认为没有理由为什么它不能在ajax请求上正常工作。 问题答案： 如果您由于当前处于 同一来源策略 而无法访问该页面，则无法向该页面发出AJAX请求。 **** 的 主机 ， 端口 和 方案 （协议）必须在为了使A
-
本文向大家介绍python根据用户需求输入想爬取的内容及页数爬取图片方法详解，包括了python根据用户需求输入想爬取的内容及页数爬取图片方法详解的使用技巧和注意事项，需要的朋友参考一下 本次小编向大家介绍的是根据用户的需求输入想爬取的内容及页数。 主要步骤： 1.提示用户输入爬取的内容及页码。 2.根据用户输入，获取网址列表。 3.模拟浏览器向服务器发送请求，获取响应。 4.利用xpath方法找
-
问题内容： 好的，所以我对ajax和从外部加载内容还很陌生，希望对我的问题有任何见解。 我目前有一个隐藏的div，它是空的，单击链接后应该在其中加载ajax内容。 我目前有一个链接列表，所有链接都具有相同的类，并且我想在单击空白div时进行幻灯片切换，然后从链接要访问的页面中加载内容。 链接： 当前的jQuery： 刚接触Ajax并加载外部内容时，我想知道如何从位于标签中的链接页面加载内容。因此，
-
问题内容： 如果它是单独的JSON文件，如何检索和使用Google图表数据集？我尝试了jQuery getJSON，但无法正常工作。Google Viz应该使用JSON绘制条形图有本地的Google API方法吗？还是可以找到一种使用jQuery的方法以及如何使用？谢谢 问题答案： 作品。 查找的输出以使用正确的结构。 因此，如果服务器上有一个getjson.php脚本返回正确格式的json，则可
-
问题内容： 我的意思是……让我们只是发出AJAX请求，然后将结果插入div＃result中。 在后端脚本中，使用 ob_flush（） 发送标头，但直到请求终止（使用 exit 或 ob_flush_end ）后才终止请求 仅当请求终止（ exit 或 ob_flush_end ）时，内容才会加载到#result中，否则，每次脚本由 ob_flush 发送标头时，内容都会加载到 #result中