How to place two or more Google Charts on the same page using JSON and Asp.Net

Question

I have the following code that works very well and generates a Google Charts, I would like to know how I can put 2 or more Graphs on the same page?

I wonder if it is necessary to repeat this call of ajax or is there any way for it to call only 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>

Answer 1

Yes. You can put as many charts as you want.

Example:

 function desenhaGraficos(){
    desenhaGraficoValor(); 
    desenhaGraficoCores();
}

Just change:

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

This mode I use to draw graphics of different types.

In this answer I showed how to assemble a table and chart together. /a/151946/51124

Take a look at this part of documentation.