Google Vis使用PHP JSON问题注释了SQL数据库中的时间线 [英] Google Vis annotated timeline from SQL database using PHP JSON issue
问题描述
我试图从PostgreSQL数据库创建一个简单的注释时间线，使用服务器端PHP脚本访问数据库中的数据，然后使用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,2,13） ，47,26），f：03 \ / 22 \ / 2011 01:47 pm}，{v：132.8，f：133}]}，{c：[{v：new Date（2011， 2,22,13,48,57），f：03 \ / 22 \ / 2011 01:48 pm}，{v：136.8，f：137}]}，
{c： [{v：新日期（2011,2,2,13,13,56,49），f：03 \ / 22 \ / 2011 01:56 pm}，{v：132.8，f：133}] }，{c：[{v：new Date（2011,2,2,13,13,58,42），f：03 \ / 22 \ / 2011 01:58 pm}，{v：128.8，f： 129}]}，
{c：[{v：new Date（2011,2,2,14,1,26），f：03 \ / 22 \ / 2011 02:01 pm }，{v：124.8，f：125}]}，{c：[{v：new Date（2011,2,2,14,14,19），f：03 \ / 22 \ / 2011年02:04 pm}，{v：128.8，f：129}]}，{c：[{v：new Date（2011,2,214,5,51），f：03 \ / 22 \ / 2011 02:05 pm}，{v：132.8，f：133}]}，
当然，我想我会告诉你我看到的是什么，而不是让你睡着一个完整的转储。
现在我知道把document.write（got here）;有点标签到我的JavaScript，我可以告诉程序完成，并没有抛出任何疯狂的错误，因为我的一部分愚蠢疏忽...（打开嘴准备插入脚）...但不知何故从我已经在其他地方看到过，这个查询响应看起来不正确（我在这篇文章中改变了格式和插入间距的可读性，所以如果你看到间距有问题，那可能就是我）。我将在这篇文章的底部包括我的PHP和我的JavaScript代码。如果有人看到我错过的任何明显的东西，或者对这个问题有什么看法，我会非常感谢一些帮助！
在此先感谢大家！ / p>
JavaScript index.html
< ; HTML>
< head>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（visualization，1，{packages：[annotatedtimeline]}）;
google.setOnLoadCallback（drawChart）;
函数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 =新的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函数完全一样。 功能代码 但不是我在找什么 对我来说，这表示我必须有一个解析步骤。就像我之前说的，从所有的故障排除中我知道如何处理google代码，在调用 ** ----------------------------- -------------------------------------------- ** 编辑2：非工作代码 我之前遇到过这个问题，在NON_WORKING_CODE中 转换为 如果不是，请尝试修复preg_quote问题 https：// code.google.com/p/mc-goog-visualization/issues/detail?id=16 I am trying to create a simple annotated timeline from a PostgreSQL database using a server side PHP script to access the data from the database, then a JavaScript client side script to display the graph. Basically pretty straightforward stuff there. Now as you may guess, nothing is showing up when I visit the page. So here is where I've gotten: When I looked at my apache log files, I can see that my PHP script is parsing correctly, and when I use the hyperlink (including all the extra goodies that my JavaScript added to properly ask PHP for what it wants from the database) I can see the response in the correct Google format. At least I think. I KINDA think that the issue may be that the response from my PHP function is actually in an incorrect syntax for the Google annotated timeline object, but I cant find enough documentation to prove that is true or not. Here is a truncated version of what my PHP function spits out: And it goes on of course, but I figured I would give you an idea of what I was seeing, not put you to sleep with a complete dump. Now I know by putting in document.write("got here"); kinda tags into my JavaScript, I can tell that the program does finish, and doesn't throw any crazy errors due to silly oversights on my part...(Opening mouth in preparation to insert foot)... However somehow from what I have read elsewhere it this query response looks mal-formatted somehow (I did change the formatting and insert spacing for readability in this post, so if you see something wrong with the spacing, it was more than likely me). I will include both my PHP and my JavaScript code at the bottom of this post. If anyone sees anything glaring that I missed, or have any insights into what could be the problem, I would really appreciate some help with this! Thanks in advance everyone! JavaScript index.html PHP vis.php ---------------------------------------------------------------------------------------- EDIT: Functional Code Alert! Ok, so here is where I'm at now, this code works, but of course doesnt pull anything from my database. As you can see, the formatting is exactly the same as I was getting from the PHP function above. FUNCTIONAL CODE but not what I'm looking for To me this indicates that there must be one parsing step I'm missing. Like I said before, from all the troubleshooting I know how to do with the google code, I got that the row and col sizes were correct in the response from the database after calling the ** ------------------------------------------------------------------------- ** EDIT 2: NON WORKING CODE
This is the non working code. The only real difference is the source of the data. And since I know that the database is responding, I am confused by the fact that its still showing a blank page.
I have experienced this problem before, just fix this line in NON_WORKING_CODE into This should work. If not, try to fix the preg_quote issue https://code.google.com/p/mc-goog-visualization/issues/detail?id=16 这篇关于Google Vis使用PHP JSON问题注释了SQL数据库中的时间线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< html>
< head>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（visualization，1，{packages：[annotatedtimeline]}）;
google.setOnLoadCallback（drawChart）;
函数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:52 am}，{v：91.4，f：91}]}，
{c：[{v：new Date（2011,2,25,7,35,20），f：03 \ / 25\ / 2011 07:35 am}，{v：89.4，f：89 }]}，
{c：[{v：new Date（2011,2,26,1,2,15），f：03 \ / 26\ / 2011 01:02 am}， {v：85.4，f：85}]}，
{c：[{v：new Date（2011,2,2,0,07,13），f：03 \ / 27 \\ \\ / 2011 12:27 am}，{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}）调用中使用它之前，必须对变量数据进行一次进一步修改。 。任何想法？
这是非工作代码。唯一真正的区别是数据的来源。因为我知道数据库正在响应，所以我对它仍然显示空白页的事实感到困惑。
< HTML>
< head>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['annotatedtimeline']}）;
function drawChart（）{
//告诉Google Visualization您的脚本是
var query = new google.visualization.Query（'/ vis.php'）;
query.setQuery（'SELECT date，level FROM tank1 ORDER BY date'）;
query.send（function（result）{
//如果有错误
document.write（result.getDetailedMessage（））;
if（result.isError（） ）{
alert（result.getDetailedMessage（））;
} else {
// //绘制数据
var data = result.getDataTable（）;
//插入一个document.write（data.getNumberOfRows（））证明数据表在这里看起来正确加载
var annotatedtimeline = new google.visualization.AnnotatedTimeLine（document.getElementById（'chart_div'））;
annotatedtimeline.draw（data，{'displayAnnotations'：false}）;
}
}）;
}
google.setOnLoadCallback（drawChart）;
< / script>
< / head>
< body>
< div id =chart_divstyle =width：400px; height：250px>< / div>
< / body>
< / html>
query.setQuery（'SELECT date，level FROM tank1 ORDER BY date'）;
query.setQuery（'SELECT *'）;
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"}]},
<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
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();
?>
<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() function. So there must be one further modification I have to do to the variable data before I try to use it in my annotatedtimeline.draw(data, {OPTIONS}) call.... Any ideas? <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>
query.setQuery('SELECT date,level FROM tank1 ORDER BY date');
query.setQuery('SELECT *');
