Gráficos com uma ajuda

Meu feliz aniversário
13 de fevereiro de 2008
O que é cpsrvd?
14 de março de 2008

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

1 Comentário

  1. DGmike disse:

    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. 😉