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, é necessário 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 é baseado na classe google.visualization.PieChart, o gráfico de barras é baseado na classe google.visualization.BarChart e assim por diante. Os gráficos de pizza e de barras estão incluídos no pacote corechart que você carregou no início deste tutorial. No entanto, se você quiser um mapa de árvore ou um gráfico de mapa em sua página, também será necessário carregar os pacotes "treemap" ou "geomap".

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

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

Desenhar o gráfico

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

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

Cada gráfico oferece suporte a um método draw() que usa dois valores: um objeto DataTable (ou DataView) que armazena seus dados e um objeto opcional de opções de gráfico. O objeto de opções não é obrigatório, pode ser ignorado ou transmitido como nulo para usar as opções padrão do gráfico.

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

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

Solução de problemas

Se o gráfico não estiver desenhando na página, veja algumas abordagens que podem ajudar a resolver seus problemas:

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

 

 

 

Mais informações