Displaying multiple instances of a ATL graph fails- WHY?

[far m]

I have the following code (below). It works by itself. But when I try to display the chart twice it does not work: 

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

Anyone knows why? 

How can I generate multiple instances? (I like to draw different graphs using the same spreadsheet)

Thanks,

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

function drawChart2() {
    var query2 = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0AqzQGhNv6cV-dDVzRWdINUxycGxQcWgtcktCRG5IQ1E');

    // Assumes that column:
    query2.setQuery('SELECT M,F');

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

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

    var data2 = response2.getDataTable();
    var chart2 = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div2'));
    chart2.draw(data2, {
        displayAnnotations: true,
        scaleColumns: [12, 1],
        scaleType: 'allfixed'
    });
}