2

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>

1 Resposta 1

2

Sim. Você pode colocar quantos gráficos quiser.

Exemplo:

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

É só mudar:

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

Esse modo eu utilizo para desenhar gráficos de tipos diferentes.

Nessa resposta eu mostrei como montar uma tabela e um gráfico juntos. https://pt.stackoverflow.com/a/151946/51124

Dê uma olhada nessa parte da documentação.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .