google visualisation annotated timeline: how to set roles using PHP json roles - php

Question

I am trying to plot two different time series using annotated timeline and PHP by adding roles - the second timeseries will have its own datetime type and role domain. Here is the index.php file:
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChartSeptTEC);
function drawChartSeptTEC(){
var json = $.ajax({
url: "get_json_forecast.php",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(json);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
// setInterval(drawChartSeptTEC, 59000 );
</script>
and the server side:
<?php
$tempcols=array();
$tempcols[] =array('type' => 'datetime','role' => 'domain');
$tempcols[] =array('type' => 'number','role' => 'data','label'=>'polynomial');
$tempcols[] =array('type' => 'number','role' => 'interval');
$tempcols[] =array('type' => 'number','role' => 'interval');
$tempcols[] =array('type' => 'datetime','role' => 'domain');
$tempcols[] =array('type' => 'number','role' => 'data','label'=>'spectral');
$table['cols'] = $tempcols;
$rows = array();
$pg_result = pg_query($link,$query);
pg_close($link);
while ($row = pg_fetch_assoc($pg_result)) {
$temp = array();
$correctDateTime = substr_replace($row['time'], ( substr($row['time'],5,2) -1 ) ,5,2);
$temp[] = array('v' => "Date(".$correctDateTime.")");
$temp[] = array('v' => (float) $row['f2poly']);
$temp[] = array('v' => (float) $row['f2polydev']);
$temp[] = array('v' => (float) $row['f2polydev']);
$temp[] = array('v' => "Date(".$correctDateTime.")");
$temp[] = array('v' => (float) $row['f2spec']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
header('Access-Control-Allow-Origin: *');
echo $jsonTable;
?>
The console error reports:
Error: each values column may be followed by one or two annotation columns. Column number 4 is of type datetime.
The visualisation works when I remove the second domain column.
The interval roles (that is the error bars) are not recognised as well. Which simplifies the question to: How do we configure roles using PHP?

Answer 1

annotated time line does not support roles. In order to achive the result, one needs to use another visualisation, for example:
....
google.load('visualization', '1', {'packages':['corechart']});
....
and to plot the data:
...
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
...
however, this chart does not support a second domain role, therefore you need to use one domain (or independent variable, say the x-axis) and use for y-values null if the domain x-values have no corresponding y-value for both data sets. In this case, and if you want to use lines, you need to set the option:
interpolateNulls: true,
in your draw() function.
Another option is to use dygraph which is faster than line chart.