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

Minha pagina, meu blog, m... Minha vida está um tanto agitada, ainda pensando nos problemas que estão me acontecendo (note querendo quebrar, continuar pagando divida, entre outros). Mas o que eu realmente
Ubuntu Countdown Como eu sou fã de ubuntu, eu não posso deixar de falar a campanha da Canonical para o lançamento do Ubuntu 9.04. A partir de hoje, vc
O que é cpsrvd? Seguindo o exemplo de Ryan Jones. Estou escrevendo sobre o que é o cpsrvd. Mas afinal de contas o que é isso?!? Se você trabalha com Servidores
Esquecido, sumido, entre ... Eu passei um tempo escrevendo coisas legais nesse blog. Mas eu passei por uma mega transformação, e o blog não me acompanhou. Primeiro que eu tive que
Só um pouco relapso Tudo bem…. Admito que tenho estado fora daqui por um bom tempo… Percebi que até a propaganda do Ruby on Rails Summit continua aqui. Vou ter que
Mudando de casa Aqueles que normalmente acompanham este blog, perceberam que nos ultimos dias ocorreram certas quedas do site. Explicação:
Pidgin sem notificação Quem instalou o ubuntu 9.04 Jaunty Jackalope, se deparou com uma coisa um tanto quanto irritante… A atualização do pidgin. O pidgin para que nunca ouviu falar,
Criando pacotes debian Esses dias no serviço, me foi incumbido a tarefa de criar os pacotes debian de alguns produtos que temos na empresa. Esses pacotes consistiam em uma aplicação
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
Ano interessante De vez em quando eu acabo reclamando que no Brasil não tem eventos interessantes para programadores… Estou me sentindo acuado, pois, este ano parece de longe ser

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.