Eu tenho o seguinte código que funciona muito bem e gera um Google Charts, gostaria de saber como posso colocar 2 ou mais graficos na mesma página?
Gostaria de saber se é preciso repetir essa chamada do ajax ou existe alguma forma de ele chamar apenas uma vez?
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Graficos.aspx/ObtemDados',
data: '{}',
success: function (response) {
drawDados(response.d);
},
error: function () {
alert("Erro ao carregar dados! Por favor tente novamente.");
}
});
function drawDados(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Descricao');
data.addColumn('number', 'Quantidade');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].Descricao + ':' + dataValues[i].Quantidade, dataValues[i].Quantidade]);
}
var total = google.visualization.data.group(data, [{
type: 'boolean',
column: 0,
modifier: function () { return true; }
}], [{
type: 'number',
column: 1,
aggregation: google.visualization.data.sum
}]);
data.addRow(['Total: ' + total.getValue(0, 1), 0]);
var options = {
title: 'Grafico',
is3D: true,
sliceVisibilityThreshold: 0
};
var chart = new google.visualization.PieChart(document.getElementById('divGrafico'));
chart.draw(data, options);
}
});
</script>
<div id="divGrafico" style="width: 50%; height: 300px; float: left"></div>