我正在尝试使用服务器端PHP脚本从PostgreSQL数据库创建一个简单的带注释时间轴来访问数据库中的数据，然后使用JavaScript客户端脚本来显示图形。基本上很简单的东西。现在您可能已经猜到，当我访问该页面时，没有任何内容出现。
所以这就是我所得到的：当我查看我的apache日志文件时，我可以看到我的PHP脚本正确解析，当我使用超链接时（包括我的JavaScript添加到的所有额外好东西）向PHP询问数据库中的内容。我可以看到正确的Google格式的响应。至少我认为。我KINDA认为问题可能是我的PHP函数的响应实际上是对Google注释的时间轴对象的语法不正确，但我找不到足够的文档来证明这是真的与否。
这是我的PHP函数吐出的截断版本：
Google.visualization.Query.setResponse({version:'0.5',reqId:'0',status:'ok',table:{cols: [{id:'date',label:"date",type:'datetime'},{id:'temp',label:"temp",type:'number'}],
rows: [{c:[{v:new Date(2011,2,22,13,47,26),f:"03\/22\/2011 01:47pm"},{v:132.8,f:"133"}]},{c:[{v:new Date(2011,2,22,13,48,57),f:"03\/22\/2011 01:48pm"},{v:136.8,f:"137"}]},
{c:[{v:new Date(2011,2,22,13,56,49),f:"03\/22\/2011 01:56pm"},{v:132.8,f:"133"}]},{c:[{v:new Date(2011,2,22,13,58,42),f:"03\/22\/2011 01:58pm"},{v:128.8,f:"129"}]},
{c:[{v:new Date(2011,2,22,14,1,26),f:"03\/22\/2011 02:01pm"},{v:124.8,f:"125"}]},{c:[{v:new Date(2011,2,22,14,4,19),f:"03\/22\/2011 02:04pm"},{v:128.8,f:"129"}]},{c:[{v:new Date(2011,2,22,14,5,51),f:"03\/22\/2011 02:05pm"},{v:132.8,f:"133"}]},
当然，它会继续下去，但我想我会告诉你我所看到的是什么，而不是让你睡不着觉。
现在我知道通过放入document.write（“到了这里”）;有点标签到我的JavaScript，我可以告诉程序确实完成，并没有因为我的愚蠢疏忽而抛出任何疯狂的错误...（张开嘴准备插入脚）...但不知何故从我的在其他地方看过这个查询响应看起来格式不正确（我在这篇文章中确实改变了格式和插入间距以便于阅读，所以如果你看到间距有问题，那很可能是我）。我将在本文的底部包含我的PHP和我的JavaScript代码。如果有人看到我错过的任何明显的东西，或者对可能出现的问题有任何见解，我真的很感激这方面的一些帮助！
先谢谢大家！
JavaScript index.html
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["annotatedtimeline"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query('/vis.php');
query.setQuery('SELECT date,temp FROM temp1 ORDER BY date');
query.send(function(result) {
document.write(result.getDetailedMessage());
if(result.isError()) {
alert(result.getDetailedMessage());
} else {
var data = result.getDataTable();
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data,{displayAnnotations: false});
}
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
PHP vis.php
<?php
require_once 'MC/Google/Visualization.php';
$user = 'postgres';
$db = new PDO('pgsql:host=localhost;dbname=house',$user,'');
$vis = new MC_Google_Visualization($db,'postgres');
$vis->addEntity('temp1', array(
'fields' => array(
'date' => array('field' => 'date', 'type' => 'datetime'),
'temp' => array('field' => 'temp', 'type' => 'number')
)
));
$vis->setDefaultEntity('temp1');
$vis->handleRequest();
?>
-------------------------------------------- --------------------------------------------
编辑：功能代码警报！
好的，所以这就是我现在的位置，这段代码有效，但当然不会从我的数据库中提取任何内容。如您所见，格式与我从上面的PHP函数获得的格式完全相同。
功能代码 但不是我想要的
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["annotatedtimeline"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(
{
cols: [{id:'date',label: 'date', type: 'datetime'},
{id:'level',label: 'level', type: 'number'}],
rows: [
{c:[{v: new Date(2011,2,24,6,52,26),f:"03\/24\/2011 06:52am"}, {v:91.4,f:"91"} ]},
{c:[{v: new Date(2011,2,25,7,35,20),f:"03\/25\/2011 07:35am"}, {v:89.4,f:"89"} ]},
{c:[{v: new Date(2011,2,26,1,2,15),f:"03\/26\/2011 01:02am"}, {v:85.4,f:"85"} ]},
{c:[{v: new Date(2011,2,27,0,27,13),f:"03\/27\/2011 12:27am"}, {v:85.4,f:"85"} ]}]
}, 0.6);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
annotatedtimeline.draw(data, {'displayAnnotations': true});
}
</script>
</head>
<body>
<div id='chart_div' style="width:400; height:250"></div>
</body>
</html>
对我而言，这表明必须有一个解析步骤我不在了。就像我之前说过的，从我知道如何处理谷歌代码的所有故障排除中，我得到了调用var data = result.getDataTable()函数后数据库响应中的行和列大小正确。因此，在我尝试在我的annotatedtimeline.draw(data, {OPTIONS})调用中使用它之前，我必须对变量数据进行一次进一步的修改....任何想法？
** --------------------------------------------- ---------------------------- **
编辑2：非工作代码 这是非工作代码。唯一真正的区别是数据来源。由于我知道数据库正在响应，我对它仍显示空白页面这一事实感到困惑。
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['annotatedtimeline']});
function drawChart() {
//Tell Google Visualization where your script is
var query = new google.visualization.Query('/vis.php');
query.setQuery('SELECT date,level FROM tank1 ORDER BY date');
query.send(function(result) {
//if there is an error
document.write(result.getDetailedMessage());
if(result.isError()) {
alert(result.getDetailedMessage());
} else {
// otherwise plot the data
var data = result.getDataTable();
// Inserting a document.write(data.getNumberOfRows()) proves that the datatable is loading seemingly correctly here
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
annotatedtimeline.draw(data, { 'displayAnnotations': false });
}
});
}
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart_div" style="width:400px; height:250px"></div>
</body>
</html>
答案 0 :(得分：1)
点击此处的Google文档页面：http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html 显示以下内容：
Important: To use this visualization, you must specify the height and width
of the container element explicitly on your page. So, for example:
<div id="chart_div" style="width:400; height:250"></div>.
您似乎没有这样做。
编辑：我刚试过那个页面上的例子，的确如果我删除了显式的高度和宽度，我什么也得不到;高度和宽度显示时间轴。答案 1 :(得分：1)
之前我遇到过这个问题，只需在NON_WORKING_CODE
中修复此行
query.setQuery('SELECT date,level FROM tank1 ORDER BY date');
到
query.setQuery('SELECT *');
这应该有效。如果没有，请尝试修复preg_quote问题https://code.google.com/p/mc-goog-visualization/issues/detail?id=16
答案 2 :(得分：0)
在您的回复中，密钥未包含在引号中，这可能是图表未呈现的原因
{id:'date', type:'date'}
{"id":"date", "type":"date"}
我刚刚搜索了visualization.query文档，this实例使用了像你这样的响应，但在响应中，键包含在引号中：
https://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1
我不熟悉PHP和你在vis.php中使用的可视化库，但如果你能设法添加这些引号，我几乎可以肯定它会起作用
我用一个带有对象符号的tabledate，但是在.NET中，这是我唯一看到的差异
希望它有所帮助，我知道这是一个老帖子，但对于像我这样的人来说