Я пытаюсь создать простую аннотированную временную шкалу из базы данных PostgreSQL, используя сценарий PHP на стороне сервера для доступа к данным из базы данных, а затем сценарий на стороне клиента JavaScript для отображения графика. Там довольно простые вещи. Теперь, как вы можете догадаться, при посещении страницы ничего не появляется.
Итак, вот что я получил: когда я посмотрел на мои файлы журнала apache, я вижу, что мой PHP-скрипт правильно разбирается, и когда я использую гиперссылку (включая все дополнительные вкусности, к которым мой JavaScript правильно добавлен спросите PHP, что он хочет от базы данных) Я вижу ответ в правильном формате Google. По крайней мере, я так думаю. Я, КИНДА, думаю, что проблема может заключаться в том, что ответ от моей функции 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>
Для меня это означает, что должен быть один шаг разбора, который я пропускаю. Как я уже говорил ранее, после устранения неполадок, которые я знаю, как поступить с кодом Google, я получил правильные размеры строк и столбцов в ответе из базы данных после вызова функции 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>