0

Passo a passo: criando gráficos com o Google Charts API

Sebastião Almeida
Sebastião Almeida

Olá pessoal, no tutorial de hoje vou ensinar vocês a utilizar a API de geração de gráficos Google Charts.

O que é o Google Charts API

O Google Charts API é uma ferramenta muito útil e pratica para desenvolver aplicações web que geram gráficos de uma forma dinâmica.

O Google Charts é considerado uma das melhores bibliotecas para geração de gráficos por permitir uma clareza muito grande no código e uma curva de aprendizagem pequena, como descrito em seu site oficial: As ferramentas de gráficos do Google são poderosas, simples de usar e gratuitas. 


Neste artigo vou mostrar como criar um gráfico de barras usando a linguagem javascript.



Inicialmente, importamos a biblioteca do google charts através da tag <script>.


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

Carregamos o Google Charts e selecionamos o pacote desejado (bar).


google.charts.load('current', {'packages':['bar']});

Agora definimos um retorno de chamada para executar quando a API de visualização do Google for carregada.

Um Retorno de chamada é o que contém um array com os dados do gráfico, instância o gráfico, define onde ele será desenhado, passa os dados como parâmetros para o Google Chats e chama o comando de desenho do gráfico na página.


google.charts.setOnLoadCallback(GeraGrafico);

No nosso caso o retorno de chamada é a função GeraGrafico.


function GeraGrafico() {

Criamos e preenchemos o array que vai conter os dados do gráfico.


   var data = google.visualization.arrayToDataTable([
          ['Mês', 'Volume'],
          ['jan', 2.5],
          ['fev', -15.1],
          ['mar', -47.7],
          ['abr', -5.4],
        ['mai', -13.6],
        ['jun', -10.1],
        ['jul', -4.9],
        ['ago', 0],
         ['set', 0],
          ['out', 0],
           ['nov', 0],
            ['dez', 0]
        ]);


Definimos as configurações do gráfico.


   var options = {
          chart: {
            title: 'Aderência de volume',
            subtitle: 'Mês, volume: 2020',
          }
        };

Instanciámos o gráfico e selecionamos o objeto "id" onde o gráfico será desenhado.


 var chart = new google.charts.Bar(document.getElementById('columnchart_material'));


Por último e não menos importante desenhamos o gráfico passando os dados e opções como parâmetros.


  chart.draw(data, options);

Veja como ficou o código por completo:


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(GeraGrafico);
   

      function GeraGrafico() {
        var data = google.visualization.arrayToDataTable([
          ['Mês', 'Volume'],
          ['jan', 2.5],
          ['fev', -15.1],
          ['mar', -47.7],
          ['abr', -5.4],
        ['mai', -13.6],
        ['jun', -10.1],
        ['jul', -4.9],
        ['ago', 0],
         ['set', 0],
          ['out', 0],
           ['nov', 0],
            ['dez', 0]
        ]);

        var options = {
          chart: {
            title: 'Aderência de volume',
            subtitle: 'Mês, volume: 2020',
          }
        };
        
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }



    </script>   


          <div id="columnchart_material" style="width: 30%px; height: 30%px;"></div>     

Resultado:




0
0

Comentários (2)

0
Sebastião Almeida

Sebastião Almeida

09/07/2021 19:12

Obrigado Edmar Silva, valeu

0
Edmar Silva

Edmar Silva

08/07/2021 21:38

Parabéns, muito bom.

PCD - apaixonado por desafios e por me superar

Brasil