Google Chart

No post sobre estatísticas de uso de browser que fiz semana passada, usei o serviço de gráficos do Google.

O Google Chart (http://code.google.com/apis/chart/) é um serviço free para que você, desenvolvedor, possa embarcar no seu site, blog, whatever, um gráfico sem precisar de uma biblioteca server-side que faça isso – no final do artigo vamos considerar alguns pontos a respeito.



O uso do Google Chart é bem simples: você coloca na sua tag img do html o caminho da imagem que o serviço gera como gráfico (não é necessário importar nenhuma biblioteca javascript, nada de requisições assíncronas, etc…).

O serviço disponibiliza uma grande variedade de gráficos, desde os mais simples (de linhas), até os mais complexos (tipo radar) passando pelos muito utilizados gráficos de pizza.

Sendo que há, também, uma boa quantidade de opções de customizações que vão além do tipo do gráfico: dimensões, cores, visão 2D ou 3D, tipos de preenchimentos de barras, etc…

Um exemplo: como montar um gráfico como os que estão no artigo referenciado ali em cima?

O formato da url que deve ser usada para gerar o gráfico é o seguinte:

http://chart.apis.google.com/chart?cht=[tipo de gráfico]&chd=[valores]&chs=[dimensões]&chl=[rótulos]



O tipo de gráfico a ser usado é o de pizza 3D, logo [tipo de gráfico]=p3

Os valores, são representados por uma lista separada por vírgula, precedida pelo tipo de encoding a ser utilizado (ver a referência aqui). Pegando os dados de Abril/2008, são eles:

IE7: 19,4%

IE6: 61,2%

Firefox: 14,4%

Outros: 4%

Logo, [valores] será igual a t:38.6,39.8,18.8,2.8
Nota: t é o tipo de encoding. Na documentação da API, existe uma explicação completa sobre ele e outros tipos

Se não forem definidades dimensões, são usadas as padrão do sistema. No caso, setei [dimensões] como um par de valores igual a 250×100

Os rótulos (conhecidos popularmente entre programadores como labels) são definidos por uma lista que utiliza o caracter | (pipe) como divisor.

Com isso, chegamos a url http://chart.apis.google.com/chart?cht=p3&chd=t:38.6,39.8,18.8,2.8&chs=250×100&chl=IE7|IE6|Firefox|Outros

Colocando em uma tag img, seria o equivalente a <img src="http://chart.apis.google.com/chart?cht=p3&chd=t:38.6,39.8,18.8,2.8&chs=250×100&chl=IE7|IE6|Firefox|Outros" alt="Acessos por Browser / 2008" />



Vale a pena dar uma explorada nessa API, ver o que dá pra fazer (existem muitas outras customizações possíveis) e até onde é possível ir 🙂



E, como havia dito lá em cima, vale a pena ponderar rapidamente um assunto: quando usar o Google Chart e quando usar uma biblioteca server-side?

Vou dar a minha opinião: o Google Chart é bom por ser uma aplicação free – apesar de que pode-se achar em PHP e Java, por exemplo, uma infinidade de bibliotecas free (já em ASP eu não conheço do assunto) -, ser de rápido aprendizado, ser desenvolvida por uma empresa que é sinônimo de excelência em serviços web. E ajuda muito quando você não tem uma linguagem de server-side disponível para ser utilizada (por exemplo, está escrevendo um artigo em um sistema de terceiros ao qual você não tem acesso às funcionalidades do mesmo).

Por outro lado, eu ainda sou favorável a utilizar bibliotecas embarcadas na sua aplicação, por motivos óbvios: não fica dependente de um serviço que está fora do seu servidor sem necessidade (o mesmo não se aplica ao Google Docs, né?), tem certeza que o serviço estará disponível sempre que seu site estiver no ar, pode customizar o serviço (se a licensa da biblioteca lhe permitir) se necessário….
Mas, essa é uma discussão que deve ficar para um artigo mais específico, só sobre "usar ou não webservices e APIs de terceiros?".

Por enquanto, é isso 😉

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *