Zamana.eti.br

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):

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