Passo a passo: Criando gráficos com o Google Charts

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:

Download do código no Github