O que define onde será apresentado o gráfico é justamente o document.getElementById('chart_div')
, especificado nas últimas linhas.
Supondo que esteja utilizando JQuery, poderia criar novos elementos e então apontar para ele, um exemplo rápido seria:
$(document).ready(function() {
google.charts.load('current', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': '100%',
'height': 'auto'
};
// Instantiate and draw our chart, passing in some options.
for (i=0; i < 5; i++){
$('.v-graficos').append('<div class="x-grafico"></div>');
var chart = new google.visualization.PieChart($('.x-grafico').last()[0]);
chart.draw(data, options);
}
}
});
<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>
<div class="v-graficos"></div>
Isso vai criar cinco gráficos devido ao loop, que cria elemento e define para criar o gráfico dentro do último elemento criado. É claro, neste caso iria criar com os mesmos valores previamente definidos.
Se ele é dinâmico, provavelmente os dados veem de um servidor e existe um exemplo no próprio google.
Supondo que sejam dois graficos, um para https://site.com/estoque
e outro para https://site.com/visitas
, então:
$(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>
No exemplo acima o trecho:
google.charts.setOnLoadCallback(function() {
drawChart(['/estoque', '/visitas']);
});
Define o caminho onde estará o JSON, veja a documentação para ver como ele deve ser formatado. Dentro do drawChart
está fazendo ajax, neste caso. Isso também poderia ser o inverso, poderia simplesmente fazer function drawChart(result){}
e informar o result
do ajax.
A cada nova requisição (que é definida no ['/estoque', '/visitas']
) será também criado um novo elemento e este último elemento criado será onde irá aparecer o gráfico.