2

Estou criando uma aplicação web na qual utiliza dois gráficos alimentados pelo banco. Uso o api do Google, google charts. Porém, só aparece o primeiro gráfico enquanto o outro esta em branco.

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  </head>
  <body>

<script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data1 = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options1 = {
          title: 'teste 1',
          is3D: true,
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('teste1'));
        chart1.draw(data1, options1);
      }
    </script>


   <div id="teste1" style="width: 600px; height: 300px;"></div>


 <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'teste 2',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('teste'));
        chart1.draw(data, options);
      }
    </script>

    <div id="teste" style="width: 600px; height: 300px;"></div>
  </body>
</html>

inserir a descrição da imagem aqui

2 Respostas 2

2

O Google Charts tem um erro de tempo que impede que mais de um gráfico carregue na mesma página.

O Google conseguiu arrumar atualmente este erro,aconselho você a ler esta documentação sobre o assunto :

https://developers.google.com/chart/interactive/docs/basic_load_libs#frozen-versions

Também de um uma olhada nesta página que fala sobre o mesmo assunto que o seu e como conseguiram arrumar :

https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/KulpuT418cg/yZieM8buCQAJ

Também já foi respondido esta pergunta no SO,aqui o link :

https://stackoverflow.com/questions/33128087/multiple-google-charts

Dê também uma olhada na documentação de como desenhar multiplos charts :

https://developers.google.com/chart/interactive/docs/basic_multiple_charts#draw-multiple-charts-on-one-page

0

Aqui está...é Facil é só seguir o exemplo:

google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo1);
function drawChartExemplo1() {

var data = google.visualization.arrayToDataTable([
    ['Unidades', 'ValorTotal'],
    ['São Paulo', 14000.45],
    ['Rio de Janeiro', 44000.00],
    ['Bahia', 69000.99],
    ['Amazonia', 35000.00]
]);

var options = {
    title: 'Exemplo de Grafico em Pizza 2',
    is3D: true,
    pieSliceText: 'value',
    legend: {
        position: 'labeled', 
        textStyle: {
            fontSize: 12,
            color: '#25476a',
            bold: true,
            italic: false}
    }
};

var chart = new google.visualization.PieChart(document.getElementById('pieChart'));

//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ',',
    groupingSymbol: '.',
    negativeColor: 'red',
    negativeParens: true,
    prefix: 'R$ '
});

//Para converter o valores da pizza para real.
formatter.format(data, 1);

chart.draw(data, options);
};

///////////////////////////////////////////////////////////////////////////////////////////////////

//2° Grafico
google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo2);
function drawChartExemplo2() {

var data = google.visualization.arrayToDataTable([
    ['Unidades', 'ValorTotal'],
    ['New York', 4000.45],
    ['California', 800.00],
    ['São Francisco', 6000.99],
    ['Miami', 3000.00]
]);

var options = {
    title: 'Exemplo de Grafico em Pizza 2',
    is3D: true,
    pieSliceText: 'value',
    legend: {
        position: 'labeled', 
        textStyle: {
            fontSize: 12,
            color: '#25476a',
            bold: true,
            italic: false}
    }
};

var chart = new google.visualization.PieChart(document.getElementById('pieChart2'));

//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ',',
    groupingSymbol: '.',
    negativeColor: 'red',
    negativeParens: true,
    prefix: 'R$ '
});

//Para converter o valores da pizza para real.
formatter.format(data, 1);

chart.draw(data, options);
};

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 .