Can someone please show an example of Annotated Timeline using query to access google spreadsheet...

[Is It Possible ...]

I have seen examples for Line Chart using query to access google spreadsheet but could not find a single example for Annotated Timeline.

Any help is appreciated.

[asgallant]

It works almost exactly the same way, except you change the visualization package loaded:

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

the chart type: 

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

and explicitly set the chart div's height and width:

<div id='chart_div' style='width: 700px; height: 240px;'></div>

The chart options are different as well, but as far as loading data is concerned, it works the same.

[Is It Possible ...]

Can you please share an example?

I am looking to use data from spreadsheet to show the timeline and trying to add 2 Y axis (different scales).

Thanks for your time.

[asgallant]

I don't have a specific example, but you can see the examples for an AnnotatedTimeline (http://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line) and querying a spreadsheet (http://code.google.com/apis/ajax/playground/?type=visualization#using_the_query_language), which you should be able to use to get started.

[Is It Possible ...]

Thanks for reply but I have already visited both the examples and tried implementing it but was not able to get results hence posted a question here.

If anyone has a working example that would really help a lot.

[asgallant]

Here's a simple example I drew up.  I don't have any google spreadsheets to work from, so you'll have to tweak it to your own needs, but the functionality is there:

function drawChart() {
    var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=<your spreadsheets key>&pub=1');

    // Assumes that column:
    //   A is the date
    //   B is the first series values
    //   C is the first series annotations
    //   D is the first series annotation text
    //   E is the second series values
    //   F is the second series annotations
    //   G is the second series annotation text
    query.setQuery('SELECT A,B,C,D,E,F');

    // Send the query with a callback function.
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();
    var chart = new google.visualization.AnnotatedTimeline(document.getElementById('chart_div'));
    chart.draw(data, {
        displayAnnotations: true,
        scaleColumns: [0, 1],
        scaleType: 'allfixed'
    });
}

The charts width and height must be explicitly defined for the chart div or the draw will fail:

<div id="chart_div" style="width: 500px; height: 300px;"></div> 

[asgallant]

I get an error message saying that the document is not published when I click that link.

[asgallant]

I'm not 100% certain, but I believe the Annotated Timeline expects the annotation and annotationText columns to be strings, not numbers, which could be why it's not working for you.  I'll look into it more tomorrow if you don't have it solved by then.

[Is It Possible ...]

Well I was trying to mimic time series chart (available as interactive time series widget) as I want the end user to scroll through. I could use line chart in visualization but not sure how to implement scrollbar functionality, besides it may not offer different scales for 2 y-axis.

[asgallant]

Ok, you can use a DataView to get around the problem. In the view, you use calculated columns to return null for the annotation and annotationText columns.  As an example, if you had 4 columns (1 date, 3 data), you would use this:

var view = new google.visualization.DataView(data);
view.setColumns([
    0, 
    1,
    {type: 'string', calc: function (dt, row) {return null;}},
    {type: 'string', calc: function (dt, row) {return null;}},
    2,
    {type: 'string', calc: function (dt, row) {return null;}},
    {type: 'string', calc: function (dt, row) {return null;}},
    3,
    {type: 'string', calc: function (dt, row) {return null;}},
    {type: 'string', calc: function (dt, row) {return null;}},
]);

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

chart.draw(view, <options>);

Each data column is followed by two calculated columns of type 'string' which return null.

[Is It Possible ...]

Ok thanks, I will try this approach and see if that works but seems we are making it much more complicated than it needs to be.

You can actually create a time-series chart using gadget within the excel sheet, I believe we are missing something crucial and it can be implemented in much easier manner.

[Is It Possible ...]

well above approach is not working.... :-(

[Is It Possible ...]

Finally resolved:

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Google Visualization API Sample</title>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>

  <script type="text/javascript">

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

function drawVisualization() {

  var query = new google.visualization.Query(

      'https://docs.google.com/spreadsheet/tq?key=< spreadsheet key here >');

  

  // Apply query language.

  query.setQuery('SELECT A,H,J,K');

  

  // Send the query with a callback function.

  query.send(handleQueryResponse);

}

function handleQueryResponse(response) {

  if (response.isError()) {

    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

    return;

  }

  var data = response.getDataTable();  

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(

      document.getElementById('visualization'));

  annotatedtimeline.draw(data, 

                         {'displayAnnotations': false,

                          'scaleType': 'maximized',

                          'thickness': 2

                         });

}

    

    

    google.setOnLoadCallback(drawVisualization);

  </script>

</head>

<body style="font-family: Arial;border: 0 none;">

<div id="visualization" style="width: 900px; height: 320px;"></div>

</body>

</html>

To see a working example on the webpage visit:

http://mysensex.weebly.com/sensex-analysis-part-iiia---nifty-chart.html 

[far m]

Could you please tell me what packet you use? 

Something like: 

      google.load('visualization', '1.1', {packages: ['controls']});

    </script>

    <script type="text/javascript">

google.setOnLoadCallback(drawVisualization);

[asgallant]

You use 

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

to load the AnnotatedTimeline charts package.  This isn't needed if you use a ChartWrapper, though.