Gráficos com uma ajuda

Desenvolvendo um site, me deparei com o seguinte problema:

Isto daqui exige um gráfico de barras para uma melhor visualização

Mas… Como?

Não sou conhecedor da biblioteca GD e não poderia fazer cada gráfico na mão (:S)

Então me lembrei que o meu grande amigo DGMike tinha me falado que o Google tinha uma API pronta para fazer gráficos (uma enorme variedade de tipos, diga-se de passagem), me lembro também que tinha me deparado com alguns erros (de minha parte) para conseguir implementá-la.

Mas como dinheiro não se ganha fácil (:P)

Decidi que era hora de aprender. O meu simples relato aqui é simplesmente para mostrar as outras pessoas a dificuldade que eu encontrei e como eu solucionei cada uma delas.

Em primeiro lugar, vamos a tabela (calma gente… São dados tabulados… Logo, não precisa ter medo):

Cor Dados Valores
#d33153 Dado 1 108
#3f7ef3 Dado 2 61
#cc2a94 Dado 3 2714
#13a737 Dado 4 119
#a4cd33 Dado 5 200
#4f5610 Dado 6 65
#840d29 Dado 7 1526
#1d529d Dado 8 124

Essa primeira coluna, é somente para poder demonstrar no gráfico a qual coluna ela corresponde.

O primeiro problema que eu encontrei foi a transformação de valores, issu mesmo, você não passa esses valores para o Google desse jeito.

Os valores: (A = 0 > Z = 25, a= 26 > z = 51, 0 = 52 > 9 = 61), pode parecer estranho (mas é), mas graças ao James Cridland, acabei encontrando um conversor para PHP.

O problema seguinte foi alterar a função chart_data() dele. Pois o mesmo concatenava os valores e não separando eles por ‘,’ (le-se virgula). Com esse problema, o Google achava que todos os dados vinham de apenas um local, ou seja, era o mesmo correspondente mas em periodos diferentes.

Com issu arrumado, o problema das cores para cada coluna ficou fácil…

De passagem o gráfico ficou assim (Ainda usando o Google Chart):

Google Chart

Vendo o codigo:

http://chart.apis.google.com/chart?
&cht=bvg
&chs=500x300
&chbh=30
&chd=s:C,B,9,C,E,B,i,C
&chco=d33153,3f7ef3,cc2a94,13a737,a4cd33,4f5610,840d29,1d529d
&chxt=y
&chxl=0:|0|2714

Explicando cada parte desse código:

cht – é o tipo de gráfico que vc deseja, no caso acima colunas;

chs – é o tamanho da imagem, <width>x<height> (no meu caso as colunas não ocuparam tudo);

chbh – é o tamanho de cada coluna;

chd – (essa é a parte complicada) São os valores, sendo que o ‘s:’ significa que são dados simplificados (issu mesmo… existe o extendido… sem comentários), aqui eles estão separados por virgula… Facilitando colocar as cores depois;

chco – São as cores de cada coluna, separada por virgula

chxt – Indica quais axis eu preciso, no caso somente o y

chxtl – Coloca o label para o axis especificado.

Por enquanto é isso.

Ainda estou desenvolvendo o componente, mas espero que futuramente eu coloque mais sobre isso.

update: Decidi tomar vergonha na cara (:D) e estou implementando uma classe para fazer todo esse serviço sujo… Óbvio que eu vou postar aqui… xD

update-1: Passeando pela internet e pensando como resolver isso, encontrei a seguinte Classe para PHP. Autoria do Malaiac. link

Similar Articles

Sete coisas que você pro... Tenho várias idéias sobre posts no meu blog, mas as vezes o que me falta é comprometimento com essa causa. O Galvão me jogou numa que eu
Google Developer Day 2008... Está aberta as inscrições para o Google Developer Day 2008 Brasil. O evento mostra as principais API do Google e seus funcionamentos. Os palestrantes, engenheiros do Google,
Vendo MacBook Pro É isso ae galera! Estou vendendo, por motivos pessoais e financeiros, o meu MacBook Pro. Ele me auxiliou muito nos momentos em que eu precisava, mas hoje
Mundo de Browsers Somente os desenvolvedores WEB: Quantos browsers usamos? Já perdi a conta de quantos browsers eu instalei e desinstalei. Hoje eu tenho (Safari, IE6, IE7, Opera, Firefox, Flock)
Meu feliz aniversário Dia 17 de fevereiro de 1984 às 18 horas, nasceu em São Paulo capital, um menino de nome “Rafael Zamana Kineippe” e hoje, pouco menos de 23
Morte ao IE6 O Elcio mandou esse convite pra mim e eu aceitei logo de cara, estou procurando/fazendo um plugin para o wordpress com essa campanha. De cara já vou
About me wordpress plugin I was searching for a good widget that has one editor included, and I found this widget “About me widget” for wordpress, and so I found some
Como conseguir milhões d... Sábado a noite. Estava me preparando para continuar a assistir a saga de Star Wars (não é Star Trek… @aliceandrade), quando olhando o twitter um amigo (leia-se
Google Developer Day 2008 Apenas muito pensar, comprei um cartão para internet. O problema aqui foi que eles decidiram não colocar internet, num evento sobre INTERNET, achei meio fora do consenso,
Ubuntu para atualização... Como dito ontem fiquei de olhar mais a fundo sobre as novidades escondidas pelo Ubuntu 8.04 LTS. Algumas coisas aparecem logo de cara. O tracker, ele faz

One comment on

  1. by DGmike on

    Boa Z!

    Sabia que um dia essa api do google iria funcionar com você quando vi o projeto. Parabén e continue assim, desenvolvendo boas coisas para ajudar a humanidade. 😉

Comments are closed.