title: "Container is not defined" Google chart
body: <p>I have solved my issue but can't answer it myself since I am too new to this site:</p>
  
  <p>turns out I needed to use the following:</p>
  
  <pre><code>chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
  </code></pre>
  
  <p>I was using JQuery to access the element,  <code>$('#pie_today_div')</code>.  As of now the evidence points to the fact that the PieChart constructor has to have standard JS code, <code>document.getElementById('pie_today_div')</code></p>
  
  <p>Maybe something else going on, but changing the way I access the container element fixes my code</p>
  
  <p><strong>ORIGINAL ISSUE FOR REFERENCE TO MY SOLUTION</strong></p>
  
  <p>I am getting a "Container is not defined" error when I am trying to instantiate a Google PieChart object.</p>
  
  <p>I validated my page at <a href="http://validator.w3.org/">http://validator.w3.org/</a> and i get a pretty green banner saying it validates.</p>
  
  <p>I receive no js errors when the page loads.  My Ajax call is making a full round trip with the data I want from the DB.</p>
  
  <p><strong>Here is my HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;
          &lt;link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen"&gt;
          &lt;script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;google.load('visualization', '1.0', {'packages':['corechart']});&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"&gt;&lt;/script&gt;
          &lt;title&gt;Call Stats&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a href="#" id="pie_today_link"&gt;Today Stats&lt;/a&gt;
          &lt;div id="pie_today_div"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>here is the js:</strong></p>
  
  <pre><code>function drawPieChartToday() {
  
      $.post('/call/ajax.php5',{
          action:'pieToday'
      }, function(ticketData) {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Count');
          data.addColumn('number', 'Topic');
          for (var key in ticketData){
              data.addRow([key, ticketData[key]]);
          }
          options = {
              title: 'Issue Topics'
          };
          alert($('#pie_today_div').attr('id'));
          chart = new google.visualization.PieChart($('#pie_today_div'));
          chart.draw(data, options);
      },'json');     
  }
  </code></pre>
  
  <p><strong>here is my debugging code to make sure the element was being found:</strong>
  <code>alert($('#pie_today_div').attr('id'));</code>  &lt;-- alerts "pie_today_div"</p>