Skip to main content
adicionou 227 caracteres ao conteúdo
Fonte Link
Inkeliz
  • 21,8mil
  • 1
  • 36
  • 73

Define o caminho onde estará o JSON, veja a documentação para ver como ele deveveja a documentação para ver como ele deve ser formatado. Dentro do drawChart está fazendo ajax, neste caso. Isso também poderia ser formatadoo inverso, poderia simplesmente fazer function drawChart(result){} e informar o result do ajax.

A cada nova páginarequisição (que é definida no ['/estoque', '/visitas']) será também criado um novo elemento e este último elemento criado será onde irá "spawnar"aparecer o gráfico.

Define o caminho onde estará o JSON, veja a documentação para ver como ele deve ser formatado.

A cada nova página será também criado um novo elemento e este último elemento criado será onde irá "spawnar" o gráfico.

Define o caminho onde estará o JSON, veja a documentação para ver como ele deve ser formatado. Dentro do drawChart está fazendo ajax, neste caso. Isso também poderia ser o inverso, poderia simplesmente fazer function drawChart(result){} e informar o result do ajax.

A cada nova requisição (que é definida no ['/estoque', '/visitas']) será também criado um novo elemento e este último elemento criado será onde irá aparecer o gráfico.

Fonte Link
Inkeliz
  • 21,8mil
  • 1
  • 36
  • 73

O que define onde será apresentado o gráfico é justamente o document.getElementById('chart_div'), especificado nas últimas linhas.


Supondo que esteja utilizando JQuery, poderia criar novos elementos e então apontar para ele, um exemplo rápido seria:

$(document).ready(function() {
  google.charts.load('current', {
    'packages': ['corechart']
  });

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {
      'title': 'How Much Pizza I Ate Last Night',
      'width': '100%',
      'height': 'auto'
    };

    // Instantiate and draw our chart, passing in some options.

    for (i=0; i < 5; i++){
      $('.v-graficos').append('<div class="x-grafico"></div>');

      var chart = new google.visualization.PieChart($('.x-grafico').last()[0]);
      chart.draw(data, options);
    }
  }
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div class="v-graficos"></div>

Isso vai criar cinco gráficos devido ao loop, que cria elemento e define para criar o gráfico dentro do último elemento criado. É claro, neste caso iria criar com os mesmos valores previamente definidos.


Se ele é dinâmico, provavelmente os dados veem de um servidor e existe um exemplo no próprio google.

Supondo que sejam dois graficos, um para https://site.com/estoque e outro para https://site.com/visitas, então:

$(document).ready(function() {

  // Para simular requisições:
  $.mockjax({
    url: "/estoque",
    responseText: {
      "cols": [
            {"id":"","label":"Topping","pattern":"","type":"string"},
            {"id":"","label":"Slices","pattern":"","type":"number"}
          ],
      "rows": [
            {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
            {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
            {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
            {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
            {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
          ]
    }
  });
  $.mockjax({
    url: "/visitas",
    responseText: {
      "cols": [
            {"id":"","label":"Topping","pattern":"","type":"string"},
            {"id":"","label":"Slices","pattern":"","type":"number"}
          ],
      "rows": [
            {"c":[{"v":"Homens","f":null},{"v":100,"f":null}]},
            {"c":[{"v":"Mulheres","f":null},{"v":100,"f":null}]},
          ]
    }
  });
  ////////////////////////////
  
  google.charts.load('current', {
    'packages': ['corechart']
  });

  google.charts.setOnLoadCallback(function() {
    drawChart(['/estoque', '/visitas']);
  });

});


function drawChart(endpoints) {

  $.each(endpoints, function(_, url){
  
    var jsonData = $.ajax({
            url: url,
            dataType: "json",
            async: false
            }).responseText;
 
     $('.v-graficos').append('<div class="x-grafico"></div>');

     var data = new google.visualization.DataTable(jsonData);
     var chart = new google.visualization.PieChart($('.x-grafico').last()[0]);
     chart.draw(data, {width: 400, height: 240});
     console.clear();
  });
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"></script>

<div class="v-graficos"></div>

No exemplo acima o trecho:

google.charts.setOnLoadCallback(function() {
   drawChart(['/estoque', '/visitas']);
});

Define o caminho onde estará o JSON, veja a documentação para ver como ele deve ser formatado.

A cada nova página será também criado um novo elemento e este último elemento criado será onde irá "spawnar" o gráfico.