Google Chart: Criando gráficos dinâmicos em minutos

O Google Chart é um serviço free para que você, desenvolvedor, possa embarcar no seu site/blog um gráfico em minutos sem precisar de uma biblioteca server-side que faça isso.

[ Hits: 46.204 ]

Por: mauro em 13/02/2009


Montando um gráfico



Bom, vamos ao que interessa, criar um gráfico que mostre qual distro é a mais utilizada.

O Google Chart necessita que os parâmetros passados sejam igual a 100%, no nosso exemplo vamos criar um gráfico que compare três resultados.

Supondo que você já tenha feito a porcentagem para os parâmetros que deseja usar, vamos começar.

Ex.: total de votos = 100.
  • Ubuntu recebeu 50 votos
  • Slackware recebeu 30 votos
  • Kurumin recebeu 15 votos
  • Outros recebeu 5 votos

Fazendo a porcentagem logo temos Ubuntu 60%, Slackware 30%, Kurumin 15%, Outros 5%. Já temos os parâmetros mais importantes que necessitamos para a construção do nosso gráfico, então mãos à obra.

Com isso chegamos à URL:

http://chart.apis.google.com/chart?cht=p3&chd=t:50,30,15,5&chs=450x200&chco=ff0000|8B7765|7B68EE|00FF00&chdl=50+Ubuntu|30+Slackware|15+Kurumin|5+Outros&chtt=Grafico+de+Distro|mais+utilizada&chl=Ubuntu|Slackware|Kurumin|Outros

Colocando em uma tag img, seria o equivalente a:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:50,30,15,5&chs=450x200&chco=ff0000|8B7765|7B68EE|00FF00&chdl=50+Ubuntu|30+Slackware|15+Kurumin|5+Outros&chtt=Grafico+de+Distro|mais+utilizada&chl=Ubuntu|Slackware|Kurumin|Outros" />

Linux: Criando Gráficos Dinâmicos em minutos com Google Chart
Onde:
  • http://chart.apis.google.com/chart? é a localização da API do Google Chart;
  • & separa os parâmetros;
  • chs=450x200 é o tamanho do gráfico em pixels;
  • chd=t:50,30,15,5 são os dados do gráfico;
  • cht=p3 é o tipo de gráfico;
  • chtt=Grafico+de+Distro|mais+utilizada é o título do gráfico (não pode conter espaços | quebra linha e + dá espaço);
  • chco=ff0000|8B7765|7B68EE|00FF00 são as cores equivalentes a cada parâmetro passado;
  • chdl=50+Ubuntu|30+Slackware|15+Kurumin|5+Outros são os parâmetros da legenda.

Existem outras inúmeras possibilidades para construir gráficos, é importante ressaltar que todos os parâmetros passados podem ser escritos dinamicamente com o PHP. Deve-se ter cuidado com os espaços, pois os mesmos não devem existir na string. Outro grande segredo é sempre separar os parâmetros com &.

Página anterior     Próxima página

Páginas do artigo
   1. Introdução
   2. Montando um gráfico
   3. Conclusão
Outros artigos deste autor
Nenhum artigo encontrado.
Leitura recomendada

Criando gráficos com a classe JPGraph (parte 1)

Trabalhando com datas em PHP

Debugando aplicações PHP com Xdebug e Eclipse PDT

Como programar com OOP em PHP, uma classe simples

Criando gráficos com a classe JPGraph (parte 2)

  
Comentários
[1] Comentário enviado por neomvll em 13/02/2009 - 07:21h

Muito bom, já ta nos Favoritos. Valeu.

[2] Comentário enviado por xKuRt em 13/02/2009 - 10:10h

Excelente dica!

[3] Comentário enviado por fabioarnoni em 13/02/2009 - 15:14h

Muito bom o artigo !!!! Favoritos tambénm hehe. A google está cada vez mais inovadora em aplicativos na nuvem, nuvem é o futuro !!! Abraços !!!

[4] Comentário enviado por everton3x em 13/02/2009 - 16:14h

Muito interessante esta dica...
A muito tempo eu utilizo os serviços do google, desde e-mail (comecei por aí) até o google doc, maps, bookmarks, notepad, etc... agora tenho mais um...heheheh

o futuro é cloud computing

[5] Comentário enviado por Marcus-RJ em 14/02/2009 - 00:49h

"O futuro é cloud computing". Sei não, eu não confio em deixar meus dados disponíveis para livre acesso por uma empresa.

A propósito --> http://br-linux.org/2008/cloud-computing-estupidez-para-stallman-e-insanidade-ellison/

"Embarcar"? Nao sei se essa seria a tradução correta. Fica igual "customizado", essa palavra nem sequer existe em português. :)

Abs! Fique com Deus!


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts