annotated timeline chart - adding roles

[dude]

I'm trying to plot an annotated timeline using two data sources. However adding roles is not recognised by the chart - the columns with role interval are plotted as lines on the cart. Here is the code from the index page:

   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script type='text/javascript'>
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
     // google.load('visualization', '1.1', {packages: ['corechart']});
      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:

$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 states:

Error: each values column may be followed by one or two annotation columns. Column number 4 is of type datetime.


Any ideas what is going wrong?

Thanks in advance!

[Daniel LaLiberte]

Sorry, but roles are not supported with the AnnotatedTimeline chart.    The AnnotationChart is a newer version, but that also does not support roles yet, though we plan to add that at some point.

Depending on the additional features you need, you might want to put together your own version using a Dashboard wrapped around a LineChart and a ChartRangeFilter.    See https://developers.google.com/chart/interactive/docs/gallery/controls?hl=en for the details.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3f0eb70c-39a6-4602-9c08-d01a603df3dd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[dude]

Thank you. I couldn't find within the documentation what is supported.

Thank you for you suggestion - I'll implement. Just one more question: does LIneChart supports roles? and second domain role?

How do you need to encode it into jsaon table (from PHP) - I tried adding the role using two methods - just adding role to the column header:

$tempcols[] =array('type' => 'number','role' => 'data','label'=>'polynomial');


and another way (suggested by somebody in the forums here who said that json needs the p option to recognise roles:

$tempcols[] =array('type' => 'datetime','p'=> array('role' => 'domain'));

thank you again!

[Daniel LaLiberte]

Yes the LineChart supports roles, including a second domain, though domain roles are rarely what you want to use.

The documentation for each chart lists the roles that are supported for it:  https://developers.google.com/chart/interactive/docs/gallery/linechart#data-format

I can't help you with how to encode your table with PHP.  One good idea, however, is to display your data using a Table chart, just to see that it contains the data you think it should.  https://developers.google.com/chart/interactive/docs/gallery/table

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/87115530-5d75-44b9-99c0-ac1802a15a2c%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[dude]

seems like I managed to progress a bit using CoreChart:

 google.load('visualization', '1', {'packages':['corechart']});

and LIneChart Class:

 var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

Following your advise, I displayed the data in a table:


NOTE: the two domains and data sets have different number of rows!


the resulting plot using the LIneChart object is:


While the values are displayed correctly when we hover the mouse (see the chart), they are plotted using the first domain. How can we tell LIneChart to plot the data points according to their domain?


The results I am trying to achieve is this:

[Daniel LaLiberte]

Why not merge your two domains, the date columns, into one?    Sort by the dates, and use null values in the series if you don't have values for all dates.  And use interpolateNulls to connect lines across nulls.

By the way, you can also get the mix of different types of plots, the lines and scatter points, in one chart using the ComboChart documented here: https://developers.google.com/chart/interactive/docs/gallery/combochart  For scatter, use the series option to specify type: 'scatter'.   Intervals are also possible.  See:  https://developers.google.com/chart/interactive/docs/gallery/intervals

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/30fb661f-3727-455b-aa0c-a2939aa292f5%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.