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

WordPress no blog do MySQ... Que o WordPress é uma excelente ferramenta de blog, isso é indiscutivel. Agora que o Blog do Kaj Arnö da MySQL usava WordPress eu me surpreendi. Me
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
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
Vida de programador Cada dia que passa me deparo um pouco no meu diferencial como programador, não falo do meu nivel de conhecimento da linguagem (pois conheço pessoas que sabem
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
WRT ou Web Runtime O WRT é uma nova maneira de desenvolver aplicativos para celulares nokia. Disponivel para as versões s60 (de forma mais estável), o WRT simplesmente transforma o seu
Seguir você fará você ... Lendo os meus feeds (que essa semana passaram de 1.000), me deparei com um post de Molly sobre o twitter. A questão é a seguinte, mesmo eu
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
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)
Yahoo User Interface ou Y... O Yahoo! tem se mostrando um ótimo companheiro para desenvolvedores, mas ao contrário do Google (que tem vários, milhares de ferramentas). O Yahoo! User Interface ou simplesmente

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.