Gráficos com Google Charts
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 comotitle,textPosition,textStyle,titleTextStyle,format, etcvAxis: objeto com as propriedades do eixo horizontal. Onde temos as propriedades comotitle,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 área
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áficos 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áficos 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 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 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
Gráficos 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']});
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