Graphiques Google: Un site inter-bloquant est bloqué par document.write

Question

Je reçois le message ci-dessus lorsque j'essaie de charger un script Google Charts. Je suis assez sûr que le problème est que j'essaye de charger le dataTable en utilisant la méthode getJSON de jQuery, mais j'ai lu les réponses à this question et ne peux toujours pas relier les points.

Les données que je suis en train d'obtenir vient de l'url /api/formula et ressemble à ceci:

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

Le script que j'utilise pour les tableaux est la suivante:

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

Et enfin le jQuery Je l'emboîte à l'intérieur ressemble à ceci:

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

Et si cela aide les fichiers sont chargés d dans cet ordre:

<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 

Il pourrait y avoir quelques mauvaises choses avec mon code, mais je crois que mon message d'erreur est parce que les données ne sont pas en cours de chargement.

Answer 1

quelques questions ici, je vais essayer d'aider ...

---

d'abord, besoin d'utiliser la dernière version des cartes Google, selon les notes de version ...

La version de Google Maps qui reste disponible via le chargeur jsapi n'est plus mise à jour de manière cohérente. Veuillez utiliser le nouveau gstatic loader.js à partir de maintenant.

cela ne changera la déclaration load ...

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

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

au lieu de -><script src="https://www.google.com/jsapi"></script>

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

---

suivant , google's callback attendront sur le document à charger, pas besoin de ...

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

---

et getJSON est asynchrone
la fonction loadIngredients retournera jsonData avant getJSON est terminé

en tant que telle, recommander le chargement google premier, et en attendant le callback,
puis charger les données, et enfin dessiner le tableau

quelque chose comme la structure suivante ...

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