[英]Google Chart Tools with PHP & MySQl
我正在嘗試使用Google Visualization API創建圖表,並在后台使用PHP和MySQL。
我正在做的是:
使用PHP / SQL從數據庫獲取數據
$sth = mysql_query("SELECT * FROM Chart");
用PHP創建JSON
$rows = array(); while($r = mysql_fetch_assoc($sth)) { $rows[] = $r; } $jdata = json_encode($rows);
然后使用JSON填充Google Visualization API
var data = new google.visualization.DataTable(<?php echo $jdata ?>);
只是為了確保JSON實際上是我做的正確格式:
$jdata = json_encode($rows);
print $jdata;
返回:
[{"id":"1","quarters":"1","salary":"1250"},{"id":"2","quarters":"2","salary":"2500"},{"id":"3","quarters":"3","salary":"4526"},{"id":"4","quarters":"4","salary":"4569"}]
所以,
Firebug返回錯誤消息:
表格無欄。 [中斷此錯誤] b,Sl),[b]}函數Zq(a,b){var c = a [xc] ...“]。”))):d(l(“表沒有列。 “))}
問題是如何從JSON數據創建列?
更新:
用於創建以下圖形的代碼:
// SQL Query
$sth = mysql_query("SELECT * FROM Chart");
//$rows = array();
while($r = mysql_fetch_assoc($sth)) {
if(!isset($google_JSON)){
$google_JSON = "{cols: [";
$column = array_keys($r);
foreach($column as $key=>$value){
$google_JSON_cols[]="{id: '".$key."', label: '".$value."'}";
}
$google_JSON .= implode(",",$google_JSON_cols)."],rows: [";
}
$google_JSON_rows[] = "{c:[{v: '".$r['id']."'}, {v: '".$r['quarters']."'}, {v: '".$r['salary']."'}]}";
}
// you may need to change the above into a function that loops through rows, with $r['id'] etc, referring to the fields you want to inject..
$data = $google_JSON.implode(",",$google_JSON_rows)."]}";
輸出HTML代碼:
<!-- load Google AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages':['columnchart']});
//set callback
google.setOnLoadCallback (createChart);
//callback function
function createChart() {
//create data table object
var data = new google.visualization.DataTable({cols: [{id: '0', label: 'id'},{id: '1', label: 'quarters'},{id: '2', label: 'salary'}],rows: [{c:[{v: '1'}, {v: '1'}, {v: '1250'}]},{c:[{v: '2'}, {v: '2'}, {v: '2500'}]},{c:[{v: '3'}, {v: '3'}, {v: '4526'}]},{c:[{v: '4'}, {v: '4'}, {v: '4569'}]}]});
//instantiate our chart objects
var chart = new google.visualization.ColumnChart (document.getElementById('chart'));
//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
//draw our chart
chart.draw(data, options);
}
</script>
<div id="chart"></div>
根據文檔 ,您是否嘗試過分別建立列引用和數據?
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', {v:7, f:'7.000'}]
]);
要格式化為對象的正確JSON,可以按如下所示進行設置:
while($r = mysql_fetch_assoc($sth)) {
if(!isset($google_JSON)){
$google_JSON = "{cols: [";
$column = array_keys($r);
foreach($column as $key=>$value){
$google_JSON_cols[]="{id: '".$key."', label: '".$value."'}";
}
$google_JSON .= implode(",",$google_JSON_cols)."],rows: [";
}
$google_JSON_rows[] = "{c:[{v: '".$r['id']."'}, {v: ".$r['quarters']."}, {v: ".$r['salary']."}]}";
}
// you may need to change the above into a function that loops through rows, with $r['id'] etc, referring to the fields you want to inject..
echo $google_JSON.implode(",",$google_JSON_rows)."]}";
Complete Working Example: PHP/MYSQL/Google Chart/JSON
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.