Question

I am having a problem with the Google annotated timeline. I have this function (shown below) that is called in the jQuery ready function:

//creates an annotated timeline
function graphAnnotatedTimeLine(url) {
    jQuery.get(url, function(returned_data) {
        //parse returned_data ...

        //build data table
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('datetime', columnHeadings[0]);
        dataTable.addColumn('number', columnHeadings[1]);

        //populate table
        for(var i = 0; i < rawData.length; i++) {
            var parsedData = data[i].split(",");
            dataTable.addRow([new Date(parsedData[0]), parseFloat(parsedData[1])]);
        }

        //draw graph
        var options = {displayAnnotations: false,
                       allowRedraw: true,
                       legendPosition: 'newRow',
                       displayZoomButtons: false,
                       wmode: 'transparent'};

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
    });
}

Called in the ready function as:

$.ready(function() {
    //generate url string
    google.setOnLoadCallback(graphAnnotatedTimeline(url));
    self.setInterval('updateGraph', 60000);
    //more stuff
});

So in the ready I call it to draw the first set of data and then set an update function to be called every minute. All the update function does is basically the same as the ready function does: build a url string and call the graph function with that url. The problem I’m having is that the graph it doesn’t display on startup. Once the update gets called once though, it displays fine after that. Is there anyone that can give me some insite as to why this is happening?

Answer 1

This is because your jquery ready function is called before the google visualization script is loaded. google.setOnLoadCallback must be called like this…

    <script type="text/javascript" src='http://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["annotatedtimeline"]}]}'></script>
    <script type="text/javascript">
      google.setOnLoadCallback(graphAnnotatedTimeline(url));
</script>