使用PHP JSON问题从SQL数据库中获取Google Vis注释时间线_Php_Javascript_Json_Postgresql_Google Visualization

使用PHP JSON问题从SQL数据库中获取Google Vis注释时间线

php javascript json postgresql google-visualization

使用PHP JSON问题从SQL数据库中获取Google Vis注释时间线,php,javascript,json,postgresql,google-visualization,Php,Javascript,Json,Postgresql,Google Visualization,我试图从PostgreSQL数据库中创建一个简单的带注释的时间轴，使用服务器端PHP脚本访问数据库中的数据，然后使用JavaScript客户端脚本显示图形。基本上很简单。现在，正如您可能猜到的，当我访问页面时，没有显示任何内容这就是我得到的结果：当我查看我的apache日志文件时，我可以看到我的PHP脚本正在正确解析，当我使用超链接（包括JavaScript添加的所有额外的东西，以正确地向PHP询问它从数据库中想要什么）时，我可以看到正确的Google格式的响应。至少我认为是这样。我认为问题可

我试图从PostgreSQL数据库中创建一个简单的带注释的时间轴，使用服务器端PHP脚本访问数据库中的数据，然后使用JavaScript客户端脚本显示图形。基本上很简单。现在，正如您可能猜到的，当我访问页面时，没有显示任何内容

这就是我得到的结果：当我查看我的apache日志文件时，我可以看到我的PHP脚本正在正确解析，当我使用超链接（包括JavaScript添加的所有额外的东西，以正确地向PHP询问它从数据库中想要什么）时，我可以看到正确的Google格式的响应。至少我认为是这样。我认为问题可能在于PHP函数的响应对于Google注释的timeline对象的语法不正确，但我找不到足够的文档来证明这一点

下面是我的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"}]},

当然会继续，但我想我会让你知道我看到了什么，而不是让你睡得一塌糊涂

现在我知道了，把文件放进去；有点像我的JavaScript中的标签，我可以告诉你程序确实完成了，并且不会因为我愚蠢的疏忽而抛出任何疯狂的错误…（张开嘴准备插入脚）。。。然而，从我在其他地方读到的内容来看，这个查询响应的格式似乎有点不正确（我确实在这篇文章中更改了格式并插入了间距，以便可读，所以如果你看到间距有问题，很可能是我）。我将在这篇文章的底部包括我的PHP和JavaScript代码。如果有人看到我遗漏了什么，或者对可能出现的问题有任何见解，我将非常感谢您的帮助

提前谢谢大家

JavaScriptindex.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>

请在此处查看Google文档页面：显示以下内容：

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>.

重要提示：要使用此可视化，必须指定高度和宽度
在页面上显式显示容器元素的。例如：
.

你似乎没有这样做

编辑：我只是在那个页面上尝试了这个例子，事实上，如果我删除了显式的高度和宽度，我什么也得不到；时间线显示的高度和宽度。

在您的回答中，关键点未包含在引号中，这可能是图表未呈现的原因

{id:'date', type:'date'}

{"id":"date", "type":"date"}

我刚刚搜索了visualization.query文档和live example使用了与您类似的响应，但在响应中，键包含在引号中：

我不熟悉PHP和vis.PHP中使用的可视化库，但如果您能够添加这些引号，我几乎可以肯定它会起作用

我使用了一个带有对象表示法的tabledate，就像你在.NET中做的那样，这是我唯一看到的区别

希望能有所帮助，我知道这是一篇老文章，但对于像我这样的人来说，在将来我曾经遇到过这个问题，只要用非工作代码修复这一行就行了

query.setQuery（'SELECT date，level FROM tank1 ORDER BY date'）
进入
query.setQuery（'SELECT*'）
这应该行得通。如果没有，请尝试解决怀孕问题首先，汉斯，我感谢你花时间帮助我！但是用了这个之后，我还是得到了一张空白页。最初我把它作为“chart.draw”选项{width:400，height:300}之一，但后来我删除了它，认为约束是我的问题。然而，即使我再次测试它，我仍然没有得到任何显示。我试过firebug，但它只是告诉我我的PHP脚本运行正常。你知道在哪里对javascript进行故障排除以查看错误吗？除了document.write，还有其他技术吗？因为我不能用它来解析google数据表类型？只是想弄清楚，您是否尝试过将HTML中的“”替换为“”？如果您确认使用此更改仍然会得到一个空白屏幕，我将尝试从文本数据而不是通过AJAX调用创建图表。这是分而治之的方法：你的问题是AJAX部分还是图表显示部分。基本上我已经做到了。我能够获取从SQL查询返回的确切数据，并将其填充到google代码中，而不是语法数据。addColumn（'date'，'datetime'）等我使用json格式：cols:[{id:'date'，label:'date'，type:'datetime'}，等等…它成功了！我能够使用SQL查询从我的PHP函数逐字返回的确切数据，并用它生成一个绘图…然后为了完整起见，我从代码游乐场获取工作代码并将其加载到我的服务器中。它也成功了。我尝试的另一件事是获取PHP SQL查询返回的变量数据下载并执行document.write（data.getNumberOfColumns（））和rows。这肯定返回了正确的值（我使用的是一个相当小的数据库，30行，2列，所以我并没有在这里用数据重载google）。因此，我知道变量正在创建中，我可以看到它具有正确的名称、类型和值，并且我知道语法是有效的。但由于某种原因，当我调用annotatedtimeline.draw（），（或chart.draw（），这取决于我对google的命名。当然，可视化）。我仍然得到一个空白页。因此，您有工作和非工作代码版本。您是否采取了下一步，比较工作和非工作代码，并尝试剪切和粘贴，以查看问题出现/消失的原因。这是我可以在PHP代码中设置的内容吗？我仍然没有得到此工作代码在上面的“功能性”代码部分，我可以在不加引号的情况下指定id和类型，JSON响应时也不加引号。我上面展示的代码有没有具体的修复方法
 <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>

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>.

{id:'date', type:'date'}

{"id":"date", "type":"date"}