Técnicas de desenho gráfico

Esta página lista as diferentes maneiras de instanciar e desenhar um gráfico na página. Cada método tem vantagens e desvantagens, conforme listado abaixo.

Conteúdo

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. Mais informações

chart.draw()

Esse é o método básico abordado no exemplo do Hello Chart! nesta documentação. Veja abaixo as etapas básicas:

  1. Carregar o carregador da biblioteca gstatic, a Visualização do Google e as bibliotecas de gráficos.
  2. preparar os dados
  3. Prepare as opções de gráfico
  4. Instancie a classe do gráfico, transmitindo um identificador para o elemento contêiner da página.
  5. É possível fazer o registro para receber qualquer evento de gráfico. Se você pretende chamar métodos no gráfico, detecte o evento "ready".
  6. Chame chart.draw(), transmitindo os dados e as opções.

Vantagens:

  • Você tem controle total sobre cada etapa do processo.
  • Você pode se registrar para detectar todos os eventos gerados pelo gráfico.

Desvantagens:

  • Detalhado
  • É necessário carregar explicitamente todas as bibliotecas de gráficos necessárias.
  • Se você enviar consultas, precisará implementar manualmente o callback, verificar o sucesso, extrair o DataTable retornado e transmiti-lo para o gráfico.

Exemplo:

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      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 our data table.
        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':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

ChartWrapper

A ChartWrapper é uma classe de conveniência que processa o carregamento de todas as bibliotecas de gráficos apropriadas para você e também simplifica o envio de consultas às fontes de dados das ferramentas de gráficos.

Vantagens:

  • Muito menos código
  • Carrega todas as bibliotecas de gráficos necessárias para você
  • Torna a consulta de fontes de dados muito mais fácil, criando o objeto Query e processando o callback para você
  • Transmita o ID do elemento do contêiner, e ele chamará getElementByID para você.
  • Os dados podem ser enviados em diversos formatos: como uma matriz de valores, uma string literal JSON ou um identificador DataTable

Desvantagens:

  • No momento, o ChartWrapper propaga apenas os eventos select, Ready e error. Para obter outros eventos, você deve obter um identificador para o gráfico encapsulado e se inscrever nos eventos. Consulte a documentação do ChartWrapper para exemplos.

Exemplos:

Confira um exemplo de gráfico de colunas com dados construídos localmente especificados como uma matriz. Não é possível especificar rótulos do gráfico ou valores de data e hora usando a sintaxe da matriz, mas é possível criar manualmente um objeto DataTable com esses valores e transmiti-los para a propriedade dataTable.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Aqui está um exemplo de um gráfico de linhas que obtém seus dados consultando uma Planilha Google. O código não precisa processar o callback.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Combinado com o carregamento automático, isso pode criar um código muito compacto:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Como usar o editor de gráficos com ChartWrapper

Você pode usar a caixa de diálogo do editor de gráficos integrada às Planilhas Google para criar um gráfico e solicitar a string ChartWrapper serializada que representa o gráfico. Você pode copiar e colar essa string e usá-la conforme descrito acima em ChartWrapper.

Você pode incorporar um editor de gráficos à sua própria página e mostrar métodos para os usuários se conectarem a outras fontes de dados e retornar a string ChartWrapper. Consulte a documentação de referência do ChartEditor para mais informações.

 

DrawChart()

DrawChart é um método estático global que encapsula um ChartWrapper.

Vantagens:

  • Igual a ChartWrapper, mas um pouco mais curto de usar.

Desvantagens:

  • Não retorna um identificador para o wrapper. Portanto, não é possível processar nenhum evento.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Mais informações