Um ditado muito comum é que uma imagem vale mais que mil palavras, e acredito que deste ditado veio outro “entendeu ou quer que eu desenhe!” 🙂 . Verdade seja dita, visualizar informações de forma visual é muito mais fácil e interessante para ter uma ideia geral das informações apresentadas, por esta razão é tão comum incluirmos eles em diversos sistemas.

Existem diversas bibliotecas de gráficos, algumas no lado do servidor gerando arquivos de imagem, outras no lado do cliente através de HTML5/SVG diretamente na página via Javascript. O Google Charts é solução do lado do cliente muito robusta gerando gráficos muito bonitos e de forma bastante simples e flexível.

Então vamos lá.

Carregando a biblioteca do de Gráficos do Google Charts

Primeiro para gerar o gráficos temos que carregar a biblioteca, isso pode ser feito com o código abaixo

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

No código acima carregamos os arquivo de de loader.js do Google Charts e carregamos o pacote corechart da versão atual(current). Quando a biblioteca terminar de ser carregada devemos criar nosso gráfico, fazemos isso adicionando uma função a ser chamada pelo callback do load(linha 4), no nosso caso chamamos a função drawChart. Dentro dela iremos criar nosso gráfico, e para fazer isso devemos preparar nosso dados.

Preparando os dados para os Gráficos

Todo gráfico necessita de dados, e pra isso os armazenamos em algum tipo de tabela. No Google Charts, utilizamos um objeto fornecido pela biblioteca para armazená-los, o google.visualization.DataTable().

Os dados são armazenados em células, referenciadas por linhas e colunas, onde as colunas são um array começando em zero, bem como as linhas.

As colunas necessitam de um tipo de dado( podendo ser string, number, boolean, date, datetime e timeofday), um rótulo e opcionalmente um id. As linhas são compostas por um array de células, onde cada célula contém o valor real do tipo de coluna, além de uma versão opcional formatada em string do valor.

Os valores das colunas e linhas pode ser fornecido de diversas formas, vemos abaixo uma bastante simples

var data = new google.visualization.DataTable();

data.addColumn('string', 'Resposta');
data.addColumn('number', 'Número');
        
data.addRows(
        [
           ['Sim' , 78  ],
           ['Não' , 178 ]
        ]            
);

No código acima criamos objeto de DataTable na linha 1, e adicionamos uma coluna do tipo string(linha 3) que será a coluna da resposta, na linha 4 adicionamos uma coluna do tipo numérico que será o número de pessoas que deu esta resposta. Na linha 6 adicionamos as linhas , que serão as os dados do nosso gráfico, ou seja neste caso as resposta as dadas. Fazemos isto através do método addRows que recebe uma matriz(ou array de arrays) que será a nossa tabela de dados com as informações que iram gerar o gráfico.

Também é possível informar os dados de nosso gráfico utilizando apenas uma matriz através da função arrayToDataTable(), passando uma matriz, onde a primeira linha é a definição das colunas e as demais a linhas são os dados propriamente ditos.

var data = google.visualization.arrayToDataTable([
                    [{id: 'nome', label:'Nome' , type: 'string'} , { id: 'salario', label: 'Salário', type:'number' }],
                    ['Micael'   , { v: 2500 , f: 'R$ 2.250,00'}], 
                    ['Roberto'  , { v: 3500 , f: 'R$ 3.500,00'}],
                    ['Alice'    , { v: 4400 , f: 'R$ 4.400,00'}],
                    ['Francisco', { v: 2700 , f: 'R$ 2.700,00'}],
                    ['Franciele', { v: 9200 , f: 'R$ 9.200,00'}],
                    ['Daniel'   , { v: 1850 , f: 'R$ 1.850,00'}]
                    ],
                false);

No exemplo acima adicionamos na primeira linha cada célula como um objeto contendo um id, um label para a coluna e o tipo de dado da coluna. Nas demais adicionamos as linhas, sendo a primeira célula o valor da primeira coluna( o nome da col. ), a segunda célula adicionado como um objeto contendo o valor numérico e formatado.

Para adicionar os dados também podemos passar um objeto contendo as colunas e linhas para a função DataTable.

var data = new google.visualization.DataTable(
        {
            cols: [
                    {id: 'nome', label:'Nome' , type: 'string'} ,
                    { id: 'salario', label: 'Salário', type:'number' }
                  ],
            rows: [
                    { c: [ 'Micael'   , { v: 2500 , f: 'R$ 2.250,00'} ] },
                    { c: [ 'Roberto'  , { v: 3500 , f: 'R$ 3.500,00'} ] },
                    { c: [ 'Alice'    , { v: 4400 , f: 'R$ 4.400,00'} ] },
                    { c: [ 'Francisco', { v: 2700 , f: 'R$ 2.700,00'} ] },
                    { c: [ 'Franciele', { v: 9200 , f: 'R$ 9.200,00'} ] },
                    { c: [ 'Daniel'   , { v: 1850 , f: 'R$ 1.850,00'} ] }
                ]
        }
        );

Exibindo os Gráficos

Com os dados em mãos basta criar um objeto do tipo de gráfico desejado e chamar a função de desenho.

 var options = {
              'title':'Você gosta do Boteco Digital?',
              'width':500,
              'height':350,
               colors: ['#3366CC', '#DC3912']
               };

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

Cada tipo de gráfico é criado por um objeto próprio, que recebe como parâmetro o elemento HTML ao qual ele ficará dentro. Na linha 8 criamos um gráfico do tipo Pizza dentro do div com o id chart_div. Na linha 9 que propriamente desenhamos o gráfico, passando para ele o objeto de dados e as opções. O objeto de opções aceita diversas propriedades, entre elas

  • title: titulo do gráfico
  • width/ height: altura e largura
  • colors: array de cores da série.
  • is3D: Se true o gráfico é exibido em forma 3D, se false em 2D.
  • hAxis: objeto com as propriedades do eixo horizontal. Onde temos as propriedades como title, textPosition, textStyle , titleTextStyle, format, etc
  • vAxis: objeto com as propriedades do eixo horizontal. Onde temos as propriedades como title, textPosition, textStyle , titleTextStyle, format, etc

Veja abaixo o resultado do gráfico gerado acima.

Tipos de Gráficos

O Google Charts fornece uma grande variedade de tipos de de gráficos, entre eles:

Gráfico em pizza

Os gráficos de área comparam tendências históricas ou mudanças mostrando a proporção do total que cada categoria representa em determinado momento. Eles comunicam tendências gerais em vez de valores individuais ao comparar várias séries de dados.

Gráfico em área
Exemplo de Gráfico em área

Gráficos em Barras

Gráfico em Barras
Exemplo de Gráfico em Barras

Um gráfico de barras é um gráfico composto por barras retangulares horizontais. O comprimento de cada barra é proporcional ao valor que representa. Use eles para comparar uma ou duas variáveis usando um único valor.

Gráfico Bolha

Um gráfico de bolhas é usado para visualizar um conjunto de dados com duas a quatro dimensões. As duas primeiras dimensões são visualizadas como coordenadas, a terceira como cor e a quarta como tamanho.

Gráfico Bolha
Exemplo de Gráfico Bolha

Gráficos Candlestick

Gráfico Candlestick
Exemplo de Gráfico Candlestick

Um gráfico de velas é usado para mostrar um valor de abertura e fechamento sobreposto a uma variação total. Os gráficos de velas são frequentemente usados ​​para mostrar o comportamento do valor das ações. Nesse gráfico, os itens em que o valor de abertura é menor que o valor de fechamento (um ganho) são desenhados como caixas preenchidas e os itens em que o valor de abertura é maior que o valor de fechamento (uma perda) são desenhados como caixas ocas.

Gráfico em Colunas

Um gráfico em colunas é um gráfico composto por barras retangulares verticais. O comprimento de cada barra é proporcional ao valor que representa. Use eles para comparar uma ou duas variáveis usando um único valor.

Gráfico em colunas
Exemplo de Gráfico em colunas

Gráfico de Gantt

Gráfico de Gantt
Exemplo de Gráfico de Gantt

Um gráfico de Gantt é um tipo de gráfico que ilustra a divisão de um projeto em suas tarefas componentes. Os gráficos Gantt ilustram o início, o fim e a duração das tarefas em um projeto, bem como quaisquer dependências que uma tarefa possa ter. Para utilizá-lo deve-se carregar o package gantt e, vez de corechart

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

Gráfico Medidor

Este gráfico exibe as informações como um medidor com um mostrador, permitindo visualizar valores em alerta(amarelo) e perigosos(vermelho). Para utilizá-lo deve-se carregar o package gauge, vez de corechart

google.charts.load('current' , {'packages': ['gauge']});
Gráfico Medidor
Exemplo de Gráfico estilo medidor

Gráfico em linha

Gráfico em Linha
Exemplo de Gráfico em Linha

Gráficos de linhas mostram tendências ou alterações ao longo do tempo exibindo uma série de pontos de dados conectados por segmentos de linha reta.

Organogramas

Organogramas são diagramas de uma hierarquia de nós, comumente usados ​​para retratar relacionamentos superiores / subordinados em uma organização

Organograma
Exemplo de Organograma

Gráficos em Pizza

Gráfico em Pizza
Exemplo de Gráfico em Pizza

Os gráficos de pizza mostram categorias como uma proporção ou porcentagem do total. Use gráficos de pizza para mostrar a composição de dados categóricos com cada segmento proporcional à quantidade que representa.

Linhas do tempo

Uma linha do tempo é um gráfico que mostra como um conjunto de recursos é usado ao longo do tempo. Se você está gerenciando um projeto de software e deseja ilustrar quem está fazendo o que e quando, ou se está organizando uma conferência e precisa agendar salas de reunião, uma linha do tempo geralmente é uma opção de visualização razoável. Par utilizar o timeline é necessário carregar o pacote timeline em vez do corechart.

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

Timeline/Linha do Tempo
Exemplo de Timeline/Linha do Tempo

O Google Charts ainda possui vários outros tipos de gráficos, que pode ser visto na documentação.

Column Roles ou Funções de Coluna

Inicialmente os DataTable tinham somente dois roles possíveis para uma coluna, domain e data. Sendo domain que especifica os principais valores do eixo e data que especifica alturas de barra, larguras de fatia de torta e assim por diante. Estes papeis são atribuídos de forma implícita baseados na ordem das colunas e seus tipos. Também temos outros tipos de role que podem ser utilizados para adicionar uma coluna com dados que serão utilizados para informar dicas, anotações, indicadores de incerteza ou estilos, etc.

Podemos ter os roles temos:

  • annotation: coluna que especifica um rótulo estático no gráfico.
  • annotationText: coluna que especifica o texto flutuante, que aparecerá quando o mouse passar sobre a anotação( não o próprio dado).
  • interval: coluna que especifica os pontos superiores e inferiores  das Barra-I no gráfico..
  • certainty: Indica se um ponto de dados é certo ou não.
  • style: adiciona estilos aos dados, com propriedades como: color, opacity, stroke-width, stroke-color, stroke-opacity.
  • tooltip: Texto a ser exibido quando o usuário passa o mouse sobre o ponto de dados associado a esta linha.
  • emphasis: Enfatiza os pontos de dados do gráfico especificados. Exibido como uma linha grossa ou um ponto grande.

Poderíamos utilizar os roles da seguinte forma:

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

    google.charts.setOnLoadCallback( drawChart );


    function drawChart(){
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Ano');
        data.addColumn('number', 'Vendas');
        data.addColumn( {type: 'number' , role: 'interval'} );
        data.addColumn( {type: 'number' , role: 'interval'} );
        data.addColumn( {type: 'string' , role: 'annotation'} );
        data.addColumn( {type: 'string' , role: 'annotationText'} );
        
        data.addRows(
            [
                ['Jun' , 1000 , 900  , 1200 , 'A' , 'Ponto A' ],
                ['Jul' , 1520 , 1100 , 1900 , 'B' , 'Ponto B'],
                ['Ago' , 690  , 600  , 710  , 'C' , 'Ponto C'],
                ['Set' , 780  , 700  , 850  , 'D ', 'Ponto D'],
            ]            
        );

        var options = {'title':'Vendas',
                       'width': 500,
                       'height':350
                       };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

Veja o exemplo acima funcionando.

Outro exemplo agora utilizando a role style:

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

    google.charts.setOnLoadCallback( drawChart );


    function drawChart(){
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Mês');
        data.addColumn('number', 'Vendas');
        data.addColumn( {type: 'string' , role: 'style'} )
        
        data.addRows(
            [
                ['Janeiro'   , 78  , 'color:#F00' ],
                ['Fevereiro' , 178 , 'color:#0F0 ; stroke-color: #000'],
                ['Março'     , 147 , 'color:#00F '],
                ['Abril'     , 566 , 'color:#F0F ; stroke-color: #0F0;'],
                ['Maio'      , 187 , 'color:#FF0'],
                ['Junho'     , 338 , 'color:#0FF']
            ]            
        );

        var options = {'title':'Vendas por Mês',
                       'width':500,
                       'height':350
                       };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

Você pode ver o exemplo acima funcionando aqui.

Bom era isso, espero que tenha dado para ajudar a começar a criar uns gráficos legais, mais recursos podem ser visto na própria página do Google Charts.

T+ pessoal