HTML, JavaScript, PHP, ASP, .Net, C#, MySQL, Ms. SQL ...

Trabalhando com gráficos Chart

Complemente seus relatórios com gráficos do tipo pizza, linhas e bolhas

api chart google gráfico relatório

O Google possui uma API para gerar gráficos de forma dinâmica. Para mais detalhes, a documentação da API está disponível no endereço http://chart.apis.google.com/

Neste artigo, estarei explicando de uma maneira básica o funcionamento de alguns gráficos, que particularmente estou utilizando bastante na criação de relatórios. Com o tempo, você irá acostumar com a codificação e ganhará tempo, bastando consultar diretamente tal documentação da API.

 

Gráficos do tipo pizza

Para criar o gráfico abaixo, abra a URL a seguir:

http://chart.apis.google.com/chart?cht=p3&chtt=Servidores&chd=t:25,40,20,15&chs=450x200&chl=ASP|PHP|.Net|JS

Onde:

cht=p3  tipo do gráfico (p: pizza normal - p3: pizza tridimensional)

chtt    título do gráfico

chd=t:  valores do gráfico, separados por "|"

chs     tamanho do gráfico, no formato largura x altura

chl     rótulos do gráfico, separados por "|"

Podemos complementar o gráfico adicionando mais parâmetros:

http://chart.apis.google.com/chart?cht=p3&chtt=Servidores&chd=t:25,40,20,15&chs=450x200&chl=ASP|PHP|.Net|JS&chco=ff0000,00ff00,0000ff,555555

Onde:

chco    Cor de cada valor no gráfico, no formato hexadecimal (html), separados por ","

*Nota: Na ocasião de suprimir algum valor do parâmetro, os posteriores irão adotar uma cor do mesmo gradiente de cores.

 

Diagrama de Venn - tipo bolha

Este tipo de gráfico é utilizado para comparar a grandeza entre 3 valores. Ao tentar citar mais de 3 valores, o excedente será ignorado. Para visualizar o gráfico a seguir, abra a URL abaixo:

http://chart.apis.google.com/chart?cht=v&chd=t:70,50,30,5,10,5,0&chs=250x200&chco=ff0000,00ff00,0000ff

Onde:

cht=v   tipo do gráfico (venn)

chd=t:  [tamanho A],[tamanho B],[tamanho C],[aproximação A+B],[aproximação A+C],[aproximação B+C],[Centralização A+B+C]

chs     tamanho do gráfico, no formato largura x altura

chco    cor de cada valor no gráfico, no formato hexadecimal (html), separados por ","

Complementando o gráfico com legenda:

http://chart.apis.google.com/chart?cht=v&chd=t:70,50,30,5,10,5,0&chs=250x200&chco=ff0000,00ff00,0000ff&chdl=ASP|PHP|.Net

Onde:

chdl    Legenda dos valores, separados por "|"

Gráficos de linha

Este tipo de gráfico é um dos mais utilizados para criação de relatório. Consiste em dois eixos, X e Y. Segue o exemplo a seguir:

http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=t:5,15,10,20,40

 

Onde:

cht=lc  tipo do gráfico (linha)
chs     tamanho do gráfico
chd=t:  ponto de valores, separados por ","

Podemos complementar o gráfico da seguinte maneira: adicionando rótulos no eixo x e y.

http://chart.apis.google.com/chart?cht=lc&chs=200x125&chxt=x,y&chd=t:5,15,10,20,40&chxl=0:|0|1|2|3|4|6|7|8|

Onde:

chxt        habilita os eixos X e Y
chxl=0:     exibe a escala no eixo x
chxl...1:   exibe a escala no eixo y

*Nota: o eixo Y irá sempre adotar 100 como valor máximo.

 

Adicionar linhas de grade

http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2

Onde:

chg    [passo do eixo x],[passo do eixo y],[tamanho do tracejado],[intensidade. 0: linha sólida - 5: linha tracejada]

Dica: Para obter uma melhor orientação nas linhas de grade, procure adotar no passo do eixo x, um valor da seguinte maneira: (100/(quantidade de rótulos - eixo x))

 

Adicionando mais uma linha

http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40|15,10,50,30,10&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2

 

Onde:

chd=t: ponto de valores, separados por "," e sucessivamente por "|", de forma a separar os valores de ambas as linhas

Alterando a cor das linhas:

http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40|15,10,50,30,10&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2&chco=990000,000099

Onde:

chco    Cor de cada valor no gráfico, no formato hexadecimal (html), separados por ","

 

Inserindo legenda:

http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40|15,10,50,30,10&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2&chco=990000,000099&chdl=ASP|PHP

Onde:

chdl    Legenda de cada linha, separados por "|"

Estes foram apenas alguns gráficos que costumo utilizar. Consulte a documentação para obter um melhor gama de opções e diversidade de gráficos.

Graças à esta API, resolvi abandonar meus próprios chart desenvolvidos em c#, pois consumia muito processamento e não tem tanta opção igual à estas aqui.

A seguir, alguns exemplos que eu ainda não utilizei, mas ajuda na hora de você apresentar um relatório na sua empresa :-)

 

 

http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=Hello

 

 

http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=s:ATSTaVd21981uocA&chco=224499&chxt=x,y&chxl=0:|Sep|Oct|Nov|Dec|1:||50|100&chm=B,76A4FB,0,0,0

 

 

http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chs=200x125&chxt=x,y&chxl=0:|Jun|July|Aug|1:||20|30|40|50&chf=bg,s,efefef

 

 

http://chart.apis.google.com/chart?cht=bvs&chd=s:YUVmw1&chco=0000FF&chs=180x150&chtt=Site+visitors&chts=0000FF,20&chbh=22,4

 

 

http://chart.apis.google.com/chart?cht=bhg&chs=200x125&chd=s:elg,ors&chbh=10,15&chco=cc0000,00aa00http://chart.apis.google.com/chart?cht=bhg&chs=200x125&chd=s:elg,ors&chbh=10,15&chco=cc0000,00aa00

 

 

http://chart.apis.google.com/chart?cht=bvg&chs=200x125&chco=cc0000,00aa00&chd=t:30,-60,50,120,80&chds=-80,140

 

 

http://chart.apis.google.com/chart?cht=bvg&chbh=5,2&chm=B,C6D9FD,0,0,0|D,4D89F9,0,0,5,1&chbh=20&chs=200x150&chd=s:1XQbnf4&chco=76A4FB

 

 

http://chart.apis.google.com/chart?cht=ls&chs=200x125&chd=s:foeZ9Gat,lkjtf3asv&chm=D,C6D9FD,1,0,8|D,4D89F9,0,0,4

TAGs

ajax arquivo asp boas práticas classe conexão sql connection string cursor location desativar programas erro cs0246 função global.asa global.asax google gráfico include rewriterule upload url amigável url rewrite


2010 - Leonardo Breda