通过 AJAX 将 PHP 表单变量传递给 Google Chart
Pass PHP form variables to Google Chart through AJAX
我有一个 PHP 表单下拉列表,其中包含数据库中的表名,该列表发布了用户所做的选择。 我想使用该发布的表名称来生成Google图表。 我在将变量通过 AJAX 传递到我的 PHP 脚本时遇到问题,该脚本为 Google 图表生成 JSON。
我知道我的 JSON 格式正确,我只需要将发布的表名传递给制作 JSON 对象的 PHP 脚本。
以下是显示图表的页面上的 javascript 的代码:
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
//this is where I save the posted url parameter, format is tableDDL=tableName
var url = <?php echo json_encode($_POST) ?>;
var jsonData = $.ajax({
url: "getData.php",
type: "POST",
data: ({url: tableDDL}),
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
这是我生成JSON对象的PHP脚本:
<?php
include 'dbConnect.php';
$table = $_POST['url'];
$sql = "SELECT row1, row2 from " . $table;
$array = array();
$array['cols'][] = array("id" =>"", "label" => "Row1", "pattern" => "", 'type' => 'string');
$array['cols'][] = array("id" =>"", "label" => "Row2", "pattern" => "", 'type' => 'number');
if ($result = $conn->query($sql)) {
while ($row = $result->fetch_assoc()) {
$array['rows'][] = array('c' => array( array('v' => $row["row1"]), array('v' => $row["row2"])));
}
}
echo json_encode($array);
?>
编辑:我已经将我的代码更新为我尝试传递给我的 PHP 脚本的静态值。代码仍然不起作用。
我的错误是:JSQL ajax error: parsererror, SyntaxError: Unexpected token <
这是我一直在尝试的更新的javascript:
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
type: "POST",
data: '{table: tableDDL}',
dataType:"json",
async: false,
success: function(response, textStatus, jqXHR){
},
error: function(jqXHR, textStatus, errorThrown){
console.log("JSQL ajax error: " + textStatus + ", " + errorThrown);
},
complete: function(){
}
}).responseText;
var jsonChartData = $.parseJSON(jsonData);
console.log("jsonChartData: " + jsonChartData);
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonChartData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
这是应该从 AJAX 函数调用并获取传递数据的更新 PHP:
<?php
include 'dbConnect.php';
$table = $_POST['tableDDL'];
$sql = "SELECT row1, row2 from " . $table;
// check connection
if ($conn->connect_errno) {
printf("Connect failed: %s'n", $conn->connect_error);
exit();
}
$array = array();
$array["cols"][] = array("id" =>"", "label" => "Row 1", "pattern" => "", "type" => "string");
$array["cols"][] = array("id" =>"", "label" => "Row 2", "pattern" => "", "type" => "number");
if ($result = $conn->query($sql)) {
while ($row = $result->fetch_assoc()) {
$array["rows"][] = array("c" => array( array("v" => $row["row1"]), array("v" => $row["row2"])));
}
}
echo json_encode($array);
?>
您可以查看我的代码,可以毫无问题地工作并解决调整大小问题:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
//All Students
var formDataAll = {type:"All"};
var jsonDataAll = $.ajax({
type: "POST",
data : formDataAll,
url: "./content/statisticsData.php",
dataType:"json",
async: false
}).responseText;
var dataAll = new google.visualization.DataTable(jsonDataAll);
var optionsAll = {
legend: 'none',
chartArea: {'width': '100%', 'height': '100%'},
colors: ['#FF8615', '#68AD12', '#A22979', '#1D63BB', '#D72D16']
};
function resize () {
var chartAll = new google.visualization.PieChart(document.getElementById('Allchart'));
chartAll.draw(dataAll, optionsAll);
}
window.onload = resize();
window.onresize = resize;
}
</script>
如果您的阵列是正确的,则必须工作。
这是另一部分(统计数据.php)(更新):
if (isset($_POST["type"])) {
if ($_POST["type"] == "All") {
$levelstatistics = returnstudentsstatistics();
$array = array();
$cols = array();
$rows = array();
$cols[] = array("id"=>"","label"=>"Level","pattern"=>"","type"=>"string");
$cols[] = array("id"=>"","label"=>"Number","pattern"=>"","type"=>"number");
foreach ($levelstatistics as $levelstatisticsData) {
$rows[] = array("c"=>array(array("v"=>$levelstatisticsData[0],"f"=>null),array("v"=>(int)$levelstatisticsData[1],"f"=>null)));
}
$array = array("cols"=>$cols,"rows"=>$rows);
echo json_encode($array);
} else {
echo "Error";
}
}
这是 json 输出:
{
"cols":[
{"id":"","label":"Level","pattern":"","type":"string"},
{"id":"","label":"Number","pattern":"","type":"number"}
],
"rows":[
{"c":[{"v":"Lactantes","f":null},{"v":0,"f":null}]},
{"c":[{"v":"Maternal","f":null},{"v":4,"f":null}]},
{"c":[{"v":"Kinder","f":null},{"v":23,"f":null}]},
{"c":[{"v":"Primaria","f":null},{"v":52,"f":null}]},
{"c":[{"v":"Secundaria","f":null},{"v":31,"f":null}]}
]
}
这是数据库函数:
/**************************
Return students statistics
**************************/
function returnstudentsstatistics() {
include ("./businesslogic/dbconnection/cfg.php");
try {
$db = new PDO('mysql:host='.$server.';dbname='.$db,$db_user,$db_password);
$string = ""; //Your query Here"
$sql = $db->prepare($string);
$sql->execute();
$row = $sql->fetchAll();
$db = null;
return $row;
} catch (PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
}
}
如果 JSON 格式正确,则需要传递一个字符串。 所以
data: ({url : tableDDL})
成为
data: '{'+url+': tableDDL}'
然后你的 Ajax 调用看起来像这样
var jsonData = $.ajax({
url: "getData.php",
type: "POST",
data: '{'+url+': tableDDL}',
dataType:"json",
async: false,
success: function(response, textStatus, jqXHR){
},
error: function(jqXHR, textStatus, errorThrown){
console.log("JSQL ajax error: " + textStatus + ", " + errorThrown);
},
complete: function(){
}
}).responseText;
相关文章:
- Google Chart API在PHP中发布
- Google Chart API控制范围和snapToData问题
- Google Chart API 不适用于 PHP
- 通过 AJAX 将 PHP 表单变量传递给 Google Chart
- 如何将整数变量从PHP传递到Javascript Google Chart API
- 通过使用javascript将新数据传递到Google Chart中的数据表来重绘图表
- Google Chart API - Pie legend.textStyle color
- 准备通过Google Chart API显示的动态数据
- 如何在PHP for Google Chart API中将{text}(无引号)添加到数组中
- Javsascript HTML Google Chart
- Rails: Google Chart只在重新加载后加载
- 使用getJSON从多级JSON读取到Google Chart
- Google Chart (Material) - Type Bar - Data in arrayToDataTabl
- Angularjs和google chart api:没有定义图表类型
- google chart as不是一个函数
- 让 wkhtmltoimage 等到 Google Chart API 完全呈现图表
- Google Chart From Json“未定义”不是一个函数
- Google Chart:传递原始数据
- Google Chart IE9问题(未定义)
- 缺乏数据和注释的Google Chart API