title: How to load google chart using ajax and jquery?
body: <p>So my situation is following:</p>
  
  <p>I have a page that creates a google chart where I place the graph in div as an example in here <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart" rel="nofollow noreferrer">https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart</a></p>
  
  <p>That works fine if I get that page to the other page by using iframe as</p>
  
  <pre><code>&lt;iframe id="mychart" name="mychart" src="stuff/chart.html" 
  frameborder="0"  onLoad=autoResize("mychart");&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>but I would like to get it by using ajax.</p>
  
  <p>I've tried following</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      google.load('visualization', '1', {'packages':['corechart']});
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  google.setOnLoadCallback(function() {
      $.ajax({type: 'get', format: 'html', timeout: 9000, url: 'stuff/chart.html', success:
          function (data) {
          console.log(data);
              $('#mychart').html(data);
              var result = $(data).filter('#chart_div');
              console.log(result.html());
              $('#mychart').html(result.html());
          }});
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Where the first log shows the html code as wanted but when logging the actual div that would contain the google chart I would like to show the result variable seems to be empty.</p>
  
  <p>Here's outlined chart.html. I did take a lot of unrelated code off but you should get the idea.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript"&gt;
      //Load the AJAX API
      // Load the Visualization API
  
      function drawChart() {
          // Took out a lot of stuff
          var data = new google.visualization.DataTable(jsonData);
          var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  
          chart.draw(data, {
              // Setting up parameters
          });
      }
          // Set a callback to run when the Google Visualization API is loaded.
          google.setOnLoadCallback(drawChart);
  
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!--Div that will hold a chart--&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I did check <a href="https://stackoverflow.com/questions/556406/google-setonloadcallback-with-jquery-document-ready-is-it-ok-to-mix">google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?</a></p>
  
  <p>and a few other topics.</p>
  
  <p>So is there a way to load the google chart in this way or should I just use iframe ? Since I guess what happens that other chart never got created or something ?</p>
  
  <p>Thanks in advance!</p>