title: Google Charts: A Parser-blocking, cross site is invoked via document.write
body: <p>I get the above message when I try and load a Google Charts script.</p>
  
  <p>I'm pretty sure the issue is that I'm trying to load the dataTable using jQuery's <code>getJSON</code> method, but I've read through the answers to <a href="https://stackoverflow.com/questions/556406/google-setonloadcallback-with-jquery-document-ready-is-it-ok-to-mix">this question</a> and still can't connect the dots.</p>
  
  <p>The data I'm trying to get comes from the url <code>/api/formula</code> and looks like this:</p>
  
  <pre><code>[{"name": "the name", "amount": "the amount"},{...},{...}]
  </code></pre>
  
  <p>The script I use for the charts is this:  </p>
  
  <pre><code>google.load('visualization', '1.0', {
  'packages':['corechart']
  });
  google.setOnLoadCallback(drawChart);
  function loadIngredients() {
  var jsonData = {
   "cols": [
   {"id":"","label":"Ingredient","pattern":"","type":"string"},
   {"id":"","label":"Amount","pattern":"","type":"number"}
   ],
   "rows": []
  };
  
  $.getJSON('/api/formula', function(data){
    $.each(data, function(key, item){
      jsonData.rows.push({"c":[{"v":item.name,"f":null},{"v":item.amount,"f":null}]});
    });
  });
  return jsonData;
  }
  
  function drawChart() {
    var options = {
      'title': 'Formula Breakdown By Weight',
      'pieHole': 0.4
    };
  
    var data = new google.visualization.DataTable(loadIngredients());
    var chart = new google.visualization.PieChart(document.getElementById('formula-chart-div'));
    chart.draw(data, options);
  }
  </code></pre>
  
  <p>And finally the jQuery I nest it inside looks like this: </p>
  
  <pre><code>$(document).ready(function(){
    $('.formula-info').click(function(){
  
  
  if (someStuffIsntEntered) {
      $('#modal2').modal();
  } else if(someOtherStuffIsntEnered) {
      $('#modal3').modal();
  } else {
    $('#formula-info-div').fadeIn(750);
    $('#formula-build-div').hide();
  
    //draw chart from formula-chart.js
    loadIngredients();
  
  
    //grab json data for formula ingredients
    $.getJSON('/api/formula', function(data){
      $('.formula-breakdown-table &gt; tbody').empty();
      //fill in table with info provided in form at top of page
      $.each(data, function(key, item){
      //fill in a table with data from the JSON
      );
    });
   }
  });
  
  //fade in top of page
      $('.back-to-main-page').click(function(){
      $('#formula-build-div').fadeIn(750);
      $('#formula-info-div').hide();
    });
  });
  </code></pre>
  
  <p>And if it helps the files are loaded in this order:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script src="../../../javascripts/formula.js"&gt;&lt;/script&gt; //jquery
  &lt;script src="../../../javascripts/formula-chart.js"&gt;&lt;/script&gt; //google charts
  </code></pre>
  
  <p>There might be a few things wrong with my code, but I believe my error message is because the data itself isn't being loaded.</p>