Pesquisa por: api
Trabalhando com gráficos Chart
api, chart, google, gráfico, relatório
13 de agosto de 2009 21:49325 visitas
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