Desenhar o gráfico

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

      // 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 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':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

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

A última etapa é desenhar o gráfico. Primeiro, você precisa instanciar uma instância da classe de gráfico que quer usar e, em seguida, chamar draw() nela.

Instanciar seu gráfico

Cada tipo de gráfico é baseado em uma classe diferente, listada na documentação do gráfico. Por exemplo, o gráfico de pizza tem como base a classe google.visualization.PieChart, o gráfico de barras tem como base a classe google.visualization.BarChart e assim por diante. Os gráficos de barras e de barras estão incluídos no pacote de gráficos principais que você carregou no início deste tutorial. No entanto, se você quiser ter um mapa de árvore ou gráfico de mapa na sua página, carregue também os pacotes "mapa de árvore" ou "mapa geográfico".

Os construtores de gráficos do Google usam um único parâmetro: uma referência ao elemento DOM para desenhar a visualização.

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

Desenhar seu gráfico

Depois de preparar os dados e as opções, você já poderá desenhar seu gráfico.

Sua página precisa ter um elemento HTML (normalmente um <div>) para conter o gráfico. É necessário transmitir uma referência a esse elemento no gráfico. Portanto, atribua a ele um ID que possa ser usado para recuperar uma referência com document.getElementById(). Qualquer elemento dentro desse elemento será substituído pelo gráfico quando ele for desenhado. Considere se você deve dimensionar explicitamente esse elemento <div>. Por enquanto, especifique o tamanho do gráfico no HTML <div>.

Cada gráfico aceita um método draw() que usa dois valores: um objeto DataTable (ou DataView) que armazena seus dados e um objeto de opções de gráfico opcional. O objeto de opções não é obrigatório, e você pode o ignorar ou transmitir o valor nulo para usar as opções padrão do gráfico.

Depois que você chamar draw(), o gráfico será desenhado na página. Chame o método draw() sempre que alterar os dados ou as opções e quiser atualizar o gráfico.

O método draw() é assíncrono, ou seja, ele retorna imediatamente, mas a instância que ele retorna pode não estar imediatamente disponível. Em muitos casos, isso não é um problema. O gráfico será exibido posteriormente. No entanto, se você quiser definir ou recuperar valores em um gráfico depois de chamar draw(), aguarde até que ele gere o evento pronto, que indica que ele foi preenchido. Vamos falar sobre a detecção de eventos na próxima página.

Solução de problemas

Veja algumas abordagens que podem ajudar a resolver os problemas caso o gráfico não desenhe na página:

  • Procure erros de digitação. Lembre-se de que a linguagem JavaScript diferencia maiúsculas de minúsculas.
    • Use um depurador JavaScript. No Firefox, use o console JavaScript, o Depurador Venkman ou o complemento Kubeflow. No Chrome, você pode usar as ferramentas para desenvolvedores (Shift + Ctl + J).
  • Pesquise no grupo de discussão da API Google Layouts. Se você não encontrar uma postagem que responda à sua pergunta, poste-a no grupo com um link para uma página da Web que demonstre o problema.

 

 

 

Mais informações