title: Loading Google Charts with jQuery Mobile
body: <p>I am working on a jQuery Mobile application and trying to implement Google Charts.  I cannot get the chart to display with my current approach.  It loads fine if I place all the code in the head, but when I transfer it to my main.js file, it does not show up.</p>
  
  <p>Basic HTML Page I am using:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Manufacturing Dashboard&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="./css/grey-orange.min.css" /&gt;
      &lt;link rel="stylesheet" href="./css/jquery.mobile.custom.structure.min" /&gt;
      &lt;link rel="stylesheet" href="./fonts/font-awesome/css/font-awesome.min.css"/&gt;
      &lt;script type="text/javascript" src="./js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/jquery.mobile.custom.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", {packages:["piechart", "corechart", "geomap"]});
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" data-theme="a" id="main-project-page"&gt;
          &lt;div data-role="panel" class="project-menu" data-position="left" data-theme="c"&gt;
          &lt;/div&gt;&lt;!-- /panel --&gt; 
          &lt;div data-role="header" data-position="fixed"&gt;
          &lt;/div&gt;&lt;!-- /header --&gt;
          &lt;div data-role="content"&gt;
              &lt;h3 id="project-name"&gt;&lt;/h3&gt;
              &lt;div id="project-overall-chart"&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;!-- /content --&gt; 
          &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;/div&gt;&lt;!-- /footer --&gt; 
      &lt;/div&gt;&lt;!-- /page --&gt;
      &lt;script src="./js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am calling an API to send me some info about the project from a database, and with that information I create my chart.  However, I am just using the example from Google's API Documentation right now as a place holder to make sure I understand it.  This is how I am trying to call it...</p>
  
  <pre><code>//Global thingz
  var request;
  var project_id = "null";
  var equipment_id = "null";
  
  //Main Project Page
  $(document).on("pageinit", "#main-project-page", function() {
  
      //Menu Panel slide effect
      $('.menu-button').click(function(event) {
          $('.project-menu').panel("open");
      });
  
      //Populate project page with current project...
      populate_project_view();
  
  
  });
  
  function populate_project_view()
  {
      //If there is a project to get
      if (project_id != 'null')
      {
          //Construct the JSON
          var json = new Object();
          var info = new Object();
  
          json.type = "info";
          info.type = "project";
          info.id = project_id;
          json.info = info;
  
          json = JSON.stringify(json);
  
          //Make-a the request-a
          request = getHTTPObject();
          request.onreadystatechange = function () {
              //If request object received response
              if (request.readyState == 4)
              {
                  var json = JSON.parse(request.responseText);
                  if (json.error == true)
                  {
                      alert('Error: ' + json.msg);
                      //Revert back to main screen
                      $.mobile.changePage('#main-page', 'slide', true, true);
                  }
                  else
                  {
                      //Populate the #main-project-page DOM with project object
                      var project = json.project;
  
                      //Populate Project's name
                      var name = document.createTextNode(project.name);
                      $('#project-name').append(name);
  
                      // Set a callback to run when the Google Visualization API is loaded.
                      google.setOnLoadCallback(drawChart);
  
                      // Callback that creates and populates a data table,
                      // instantiates the pie chart, passes in the data and
                      // draws it.
                      function drawChart() {
  
                          // Create the data table.
                          var data = new google.visualization.DataTable();
                          data.addColumn('string', 'Topping');
                          data.addColumn('number', 'Slices');
                          data.addRows([
                            ['Mushrooms', 3],
                            ['Onions', 1],
                            ['Olives', 1],
                            ['Zucchini', 1],
                            ['Pepperoni', 2]
                          ]);
  
                          // Set chart options
                          var options = {'title':'How Much Pizza I Ate Last Night',
                                         'width':400,
                                         'height':300};
  
                          // Instantiate and draw our chart, passing in some options.
                          var chart = new google.visualization.PieChart(document.getElementById('project-overall-chart'));
                          chart.draw(data, options);
                      }
                  }
              }
          }
          request.open("GET", "./php/api.php?package=" + json + '&amp;qs=' + new Date().getTime(), true);
          request.send(null);
      }
  }
  
  /*
      Support functions 
  */
  
  //Returns an HTTPObject
  function getHTTPObject()
  {
      var xhr = false;
      if (window.XMLHttpRequest)
      {
          xhr = new XMLHttpRequest();
      } 
      else if (window.ActiveXObject) 
      {
          try
          {
              xhr = new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch(e)
          {
              try
              {
                  xhr = new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch(e)
              {
                  xhr = false;
              }
          }
      }
      return xhr;
  }
  </code></pre>
  
  <p>I'm not very experienced with JavaScript's AJAX operations and it's overall activity in the browser yet, still trying to get a better grasp on all of that.  Thanks in advance for any help with this problem!</p>
  
  <p>Nathan</p>