我在互联网上搜索了好几天,我认为这是一个相当常见的请求,即使用远程服务器的数据(JSON数据表)在本地服务器上填充谷歌可视化表。
我在谷歌代码游乐场上找到了一个编码示例(http://code.google.com/apis/ajax/playground/?type=visualization#json_data_table)这帮助我开始了。这个例子非常适合将表条目直接硬编码到html文件中。
我不想对值进行硬编码,而是想用来自远程服务器的JSONP请求填充本地谷歌可视化表。以下是驻留在远程服务器上的php文件的内容:
<?php
//connect to mysql database using authentication credentials
require_once( "inc/<connection file>.inc" );
// Query table
$sql="select id, address from historical_sales order by id";
$result = mysqli_query($con,$sql);
$table = array();
$table['cols'] = array(
array(id => "id", label => "ID", type => "string"),
array(id => "address", label => "Address", type => "string")
);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
$temp = array();
$temp[] = array("v" => $r["id"]);
$temp[] = array("v" => $r["address"]);
$rows[] = array("c" => $temp);
}
// populate the table with rows of data
$table['rows'] = $rows;
// encode the table as JSON
$jsonTable = json_encode($table);
header('Content-type: application/json');
echo $_GET['callback'] . '(' . $jsonTable . ')';
?>
该文件的输出如下:
({"cols":[{"id":"id","label":"id","type":"string"},{"id:"address","label":"address","type":"string"}],"rows{"v":"3800 S Cantabria Cir A-1001"}]},{"c":[{
我的HTML文件包含以下代码:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
$(document).ready(function()
{
function drawVisualization() {
// Create and populate the data table.
$.getJSON("http://mhsw.com/realestate/jsonp-xs.php?callback=?", {},function (jdata)
{var JSONObject = jdata;
document.getElementById("jid_label").innerHTML=JSONObject.cols[0].label;
document.getElementById("jaddress_label").innerHTML=JSONObject.cols[1].label;
});
var data = new google.visualization.DataTable(JSONObject, 0.6);
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {'allowHtml': true});
}
google.setOnLoadCallback(drawVisualization);
});
</script><div id="table"></div>
<p>
ID: <span id="jid_label"></span><br />
Address: <span id="jaddress_label"></span><br />
</p>
我很确定HTML文件中的回调函数正在接收JSON数据,因为我正在显示ID和地址标签,但是,谷歌可视化表没有显示。如果能为我们解决这个问题提供帮助,我们将不胜感激。
这是解决问题的新HTML文件:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
$(document).ready(function()
{
function drawVisualization()
{
// Create and populate the data table.
$.getJSON("http://mhsw.com/realestate/jsonp-xs.php?callback=?", {},function (jdata)
{
var JSONObject = jdata;
document.getElementById("jid_label").innerHTML=JSONObject.cols[0].label;
document.getElementById("jaddress_label").innerHTML=JSONObject.cols[1].label;
var data = new google.visualization.DataTable(JSONObject, 0.6);
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {'allowHtml': true});
});
}
google.setOnLoadCallback(drawVisualization);
});
</script><div id="table"></div>
<p>
ID: <span id="jid_label"></span><br />
Address: <span id="jaddress_label"></span><br />
</p>