$(document).ready(function() {
// Para simular requisições:
$.mockjax({
url: "/estoque",
responseText: {
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
});
$.mockjax({
url: "/visitas",
responseText: {
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Homens","f":null},{"v":100,"f":null}]},
{"c":[{"v":"Mulheres","f":null},{"v":100,"f":null}]},
]
}
});
////////////////////////////
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function() {
drawChart(['/estoque', '/visitas']);
});
});
function drawChart(endpoints) {
$.each(endpoints, function(_, url){
var jsonData = $.ajax({
url: url,
dataType: "json",
async: false
}).responseText;
$('.v-graficos').append('<div class="x-grafico"></div>');
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.PieChart($('.x-grafico').last()[0]);
chart.draw(data, {width: 400, height: 240});
console.clear();
});
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"></script>
<div class="v-graficos"></div>