Toda pessoa que se torna programador :P, um dia na vida pelo menos, vai ter a necessidade de mostrar dados em formas de gráficos! Veja agora um pouco de Google Chart API em 10 minutos.

A API do Google Chart retorna uma imagem em formato PNG em resposta a um URL. É possível gerar diversos tipos de imagens, incluindo gráficos de linha, gráficos de barra, gráficos de setores, mapas … Vejamos a segir uma pequena introdução.

Para qualquer tipo de gráfico, exceto os mapas, a quantidade de pixels não pode passar de 300.000 pixels, ou, altura ou largura não pode passar de 1000 pixels. Para descobrir a quantidade de pixels que seu gráfico possui, é so multiplicar largura X altura e você obterá a quantidade de pixels.

Para gerar a imagem acima, foi chamada a seguinte url:

http://chart.apis.google.com/chart?chs=250×100&chd=t:60,40&cht=p3&chl=Hello|World

onde:

chs = tamanho do gráfico (250×100), 250 pixels de largura por 100 pixels de altura.

chd = dados do gráfico, 60%, 40%

cht = tipo do gráfico, pizza 3d

chl = rotulos do gráfico

Este exemplo foi tirado da documentação do google chart api, agora vamos modificar alguns parâmetros:

http://chart.apis.google.com/chart?chs=375×150&chd=t:10,50.10,39.90&cht=p&chl=Hello|World|Google

Acabamos de passar os seguintes dados:

Hello = 10%

World = 50.10%

Google = 39.90%

Preste atenção que o tipo de gráfico também mudou, cht=p e não cht=p3. Para consultar todos os tipos de gráficos, você pode consultar:

http://code.google.com/intl/pt-BR/apis/chart/#chart_type

Agora, vamos dar um título para o gráfico, onde:

chts = cor rgb,tamanho

chtt = titulo do gráfico

Você ainda pode forçar a quebra de linha no título, colocando um ” | ” para cada linha que quiser pular:

http://chart.apis.google.com/chart?chs=375×150&chd=t:10,50.10,39.90&cht=p&chl=Hello|World|Google&chtt=grafico|linha 2&chts=000000,10

Você também pode customizar as cores do seu gráfico escolhendo cores(rgb) para ele:

http://chart.apis.google.com/chart?chs=375×150&chd=t:10,50.10,39.90&cht=p&chl=Hello|World|Google&chtt=grafico|linha 2&chts=000000,10&chco=fc00dd|ffcc00|dedede

Caso você passe um numero de cores menor que o numero de dados, as cores serão interpoladas.

Mude o tipo de gráfico(cht) de p para p3 e você obterá:

http://chart.apis.google.com/chart?chs=375×150&chd=t:10,50.10,39.90&cht=p3&chl=Hello|World|Google&
chtt=grafico|linha%202&chts=000000,10&chco=fc00dd|ffcc00|dedede

Isso é apenas o básico para se gerar gráficos com esta poderosa API. A documentação em português pode ser encontrada em: http://code.google.com/intl/pt-BR/apis/chart/

Qualquer dúvida é só escrever!