[visualization-api] Multiple Google Charts load concurrently

Sat, 05 Dec 2009 23:16:04 -0800 

Hello Everyone,

I am  trying to load two Google Charts concurrently in 1 html file.
However, when doing this one of the charts/tables dont render.  Not
sure if this is a Google restriction or something on the HTML.

Below is a sample of what I mean.  I know the Javascript is working
because I put the 'alert' message box in the code.  However, when
running only 1 of the charts loads.

Anyone have any idea how to get past this?

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!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() {
      alert('load1');
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sold Pencils');
      data.addColumn('string', 'title1');
      data.addColumn('string', 'text1');
      data.addColumn('number', 'Sold Pens');
      data.addColumn('string', 'title2');
      data.addColumn('string', 'text2');
      data.addRows(6);
      data.setValue(0, 0, new Date(2008, 1 ,1));
      data.setValue(0, 1, 30000);
      data.setValue(0, 4, 40645);
      data.setValue(1, 0, new Date(2008, 1 ,2));
      data.setValue(1, 1, 14045);
      data.setValue(1, 4, 20374);
      data.setValue(2, 0, new Date(2008, 1 ,3));
      data.setValue(2, 1, 55022);
      data.setValue(2, 4, 50766);
      data.setValue(3, 0, new Date(2008, 1 ,4));
      data.setValue(3, 1, 75284);
      data.setValue(3, 4, 14334);
      data.setValue(3, 5, 'Out of Stock');
      data.setValue(3, 6, 'Ran out of stock on pens at 4pm');
      data.setValue(4, 0, new Date(2008, 1 ,5));
      data.setValue(4, 1, 41476);
      data.setValue(4, 2, 'Bought Pens');
      data.setValue(4, 3, 'Bought 200k pens');
      data.setValue(4, 4, 66467);
      data.setValue(5, 0, new Date(2008, 1 ,6));
      data.setValue(5, 1, 33322);
      data.setValue(5, 4, 39463);

      var annotatedtimeline = new
google.visualization.AnnotatedTimeLine(
          document.getElementById('visualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    }

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!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() {
      alert('load2');
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sold Pencils');
      data.addColumn('string', 'title1');
      data.addColumn('string', 'text1');
      data.addColumn('number', 'Sold Pens');
      data.addColumn('string', 'title2');
      data.addColumn('string', 'text2');
      data.addRows(6);
      data.setValue(0, 0, new Date(2008, 1 ,1));
      data.setValue(0, 1, 30000);
      data.setValue(0, 4, 40645);
      data.setValue(1, 0, new Date(2008, 1 ,2));
      data.setValue(1, 1, 14045);
      data.setValue(1, 4, 20374);
      data.setValue(2, 0, new Date(2008, 1 ,3));
      data.setValue(2, 1, 55022);
      data.setValue(2, 4, 50766);
      data.setValue(3, 0, new Date(2008, 1 ,4));
      data.setValue(3, 1, 75284);
      data.setValue(3, 4, 14334);
      data.setValue(3, 5, 'Out of Stock');
      data.setValue(3, 6, 'Ran out of stock on pens at 4pm');
      data.setValue(4, 0, new Date(2008, 1 ,5));
      data.setValue(4, 1, 41476);
      data.setValue(4, 2, 'Bought Pens');
      data.setValue(4, 3, 'Bought 200k pens');
      data.setValue(4, 4, 66467);
      data.setValue(5, 0, new Date(2008, 1 ,6));
      data.setValue(5, 1, 33322);
      data.setValue(5, 4, 39463);

      var annotatedtimeline = new
google.visualization.AnnotatedTimeLine(
          document.getElementById('visualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    }

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>

--

You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.

Reply via email to