Help with ATL - multiple plots

far m

unread,

Jun 10, 2012, 1:24:54 AM6/10/12

to google-visua...@googlegroups.com

Can anyone please tell me how to show multiple instances of an ATL? I have the following function but cannot make it plot twice!

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'
  });
}

asgallant

unread,

Jun 11, 2012, 10:17:08 AM6/11/12

to google-visua...@googlegroups.com

That should work by itself...is there another chart drawing function in your code? If so, then try this:

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

google.setOnLoadCallback(init);

function init () {
  // I assume the other chart is drawn in a function called drawChart1
  drawChart1();
  drawChart2();
}

Make sure that the google.load(..) and google.setOnLoadCallback(...) appear only once in your code.

far m

unread,

Jun 15, 2012, 5:09:24 PM6/15/12

to google-visua...@googlegroups.com

Thank you for your help. However, I am still having problem drawing the chart twice. Only one chart shows up. I added the function init ()

Here is the entire code:

<html>

<head>

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

google.setOnLoadCallback(drawChart2);

function init () {

// I assume the other chart is drawn in a function called drawChart1

drawChart2();

drawChart1();

}

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'

});

}

function drawChart1() {

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

// Assumes that column:

query1.setQuery('SELECT M,F');

// Send the query with a callback function.

query1.send(handleQueryResponse1);

}

function handleQueryResponse2(response1) {

if (response1.isError()) {

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

return;

}

var data1 = response1.getDataTable();

var chart1 = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));

chart1.draw(data1, {

displayAnnotations: true,

scaleColumns: [12, 1],

scaleType: 'allfixed'

});

}

// google.setOnLoadCallback(drawVisualization);

</script>

</head>

<body>

// Note how you must specify the size of the container element explicitly!

// JUST CHECKING! Note how you must specify the size of the container element explicitly!

</body>

</html>

asgallant

unread,

Jun 18, 2012, 10:51:42 AM6/18/12

to google-visua...@googlegroups.com

You forgot to change the setOnLoadCallback:

google.setOnLoadCallback(drawChart2);

should be:

google.setOnLoadCallback(init);

You also have two functions called "handleQueryResponse2", when one should be "handleQueryResponse1"

BTW, if you intend to use the same data for both charts, you don't have to make two queries - you can do this all in one query and one callback, see: http://jsfiddle.net/asgallant/rpTX2/ (this applies to any case where one query can fetch all of the data you need, even if pieces of it don't apply to some of your charts).

Also, since you are using the same data for both charts,

Reply all

Reply to author

Forward