Google Charts: A Parser-blocking, cross site is invoked via document.write

Question

I get the above message when I try and load a Google Charts script.

I'm pretty sure the issue is that I'm trying to load the dataTable using jQuery's getJSON method, but I've read through the answers to this question and still can't connect the dots.

The data I'm trying to get comes from the url /api/formula and looks like this:

[{"name": "the name", "amount": "the amount"},{...},{...}]

The script I use for the charts is this:

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);
}

And finally the jQuery I nest it inside looks like this:

$(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 > 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();
  });
});

And if it helps the files are loaded in this order:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="../../../javascripts/formula.js"></script> //jquery
<script src="../../../javascripts/formula-chart.js"></script> //google charts

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.

Answer 1

a few issues here, i'll try to help...

---

first, need to use the latest version of google charts, according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

this will only change the load statement...

use this --> <script src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {
'packages': ['corechart']
});

instead of --> <script src="https://www.google.com/jsapi"></script>

google.load('visualization', '1.0', {
'packages':['corechart']
});

---

next, google's callback will wait on the document to load, no need for...

$(document).ready(function(){...

---

and getJSON is asynchronous
the loadIngredients function will return jsonData before getJSON is finished

as such, recommend loading google first, and waiting for the callback,
then load the data, and finally draw the chart

something like the following structure...

google.charts.load('current', {
  callback: loadIngredients,
  packages: ['corechart']
});

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}]});
    });
    drawChart(jsonData);
  });
}

function drawChart(jsonData) {
  var options = {
    'title': 'Formula Breakdown By Weight',
    'pieHole': 0.4
  };

  var data = new google.visualization.DataTable(jsonData);
  var chart = new google.visualization.PieChart(document.getElementById('formula-chart-div'));
  chart.draw(data, options);
}