I have the following code that works great and generates a Google Charts, I would like to know how I can put 2 or more graphics on the same page?
Would you like to know if you need to repeat this ajax call, or is there any way to call it just once?
<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>