Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 1

Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 1

Gráficos são sempre necessários na hora em que precisamos apresentar dados, seja em apresentações, relatórios ou artigos. Na web não é diferente, muitas vezes precisamos usar gráficos para complementar um post, uma notícia e até mesmo uma promoção ou anúncio. Pois o Google, sempre de olho nas necessidades dos desenvolvedores, criou uma ferramenta simples, grátis e rápida para criação de gráficos que você pode começar a utilizar agora mesmo no seu site. Nesse post vou mostrar como usá-la.

A Chart API

A API do Google Chart Tools, também conhecida como Chart API, é a caçula do projeto Google Visualization que também engloba a ferramenta Interactive Charts, um pouco (bem pouco) mais complexa. Sua principal vantagem é a simplicidade, já que tudo o que você precisa fazer para usá-la é uma chamada para sua URL enviando os dados do gráfico via query string. A chamada retornará a imagem do gráfico. Por exemplo, veja como fica a URL para criação de um gráfico de barras simples e a imagem resultante:

<img src="http://chart.apis.google.com/chart?chxt=x,y&cht=bvs&chd=t:60,70,85,65,40&chco=76A4FB&chls=2.0&chs=180x150
&chxl=0:|Jan|Fev|Mar|Abr|Mai" alt="" />

Note que a imagem já vem com o gráfico pronto, com os eixos, labels (Jan, Fev, etc..) e barras. Perceba também que a altura e largura da imagem são definidas na própria URL, nesse caso 180×150. Você só precisa posicioná-la na sua página como uma imagem comum.
A mesma API pode ser usada para criar vários tipos de gráficos: barras, pizza, linhas, candlestick, etc.. Como não quero reescrever a documentação da API e sim dar uma introdução, vou mostrar aqui como criar gráficos pizza e de barras, que acredito serem os mais comuns.

Gráficos Pizza

O primeiro tipo de gráfico que vou mostrar é o do tipo Pizza. Como em todos os outros, o segredo para criar um bom gráfico é saber quais os parâmetros certos devemos passar para a API. Os principais são os do tipo de gráfico (cht), de dados (chd) e de tamanho (chs). Veja o exemplo de um gráfico usando apenas esses 3 parâmetros:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=180x125" class="alignleft" />

No exemplo ao lado foram usados os seguintes parâmetros:
Tipo: cht=p – significa que quero um gráfico pizza (p);
Dados: chd=t:45,20,20,15 – envio os dados em formato texto (t) separados por vírgula;
Tamanho: chs=180×125 – indico o tamanho da imagem, 180×125;


Adicionando labels e legendas

Claro que apenas o gráfico, sem nenhuma indicação de valores ou legenda, não é lá muito útil já que dificilmente alguém vai conseguir entender e analisar os dados. Então é hora de começar a melhorar o gráfico. Para isso podemos usar 2 boas opções: labels e legendas. Com elas o gráfico vai ficar bem melhor.
Mais uma vez, tudo o que você precisa fazer é adicionar os parâmetros corretos, as labels usam o parâmetro chl e as legendas usam o parâmetro chdl. Veja então como fica o gráfico, agora com legendas e labels:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=380x250&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Esse é exatamente o mesmo gráfico anterior, agora com os seguintes parâmetros:
Tipo: cht=p – gráfico pizza (p);
Dados: chd=t:45,20,20,15 – os dados;
Tamanho: chs=380×250 – o tamanho;
Labels: chl=45%|20%|20%|15% – labels;
Legendas: chdl=Janeiro|Fevereiro|Março|Abril – legendas;


Usando 3D

E se você quiser apresentar o seu gráfico em 3D basta fazer uma pequena alteração, trocando tipo de gráfico de pizza (p) para pizza 3D (p3). Realmente não podia ser mais fácil, veja como fica o gráfico anterior agora em 3D:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=480x200&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Olhe a URL da imagem e note que ela é praticamente a mesma do exemplo anterior, as únicas diferenças são no parâmetro cht, que agora pede um gráfico 3D (p3) e no tamanho do gráfico.


Customizando as cores

Existem três maneiras diferentes para customizar as cores de um gráfico mas todas elas usam o mesmo parâmetro chco. A diferença está na quantidade de cores que eu passo para esse parâmetro.

Usando uma cor

A primeira forma de definir as cores do gráfico é escolher uma cor base que será usada com intensidade gradual afim de diferenciar cada uma das áreas do gráfico. É exatamente como vínha fazendo antes, porém estava usando a cor default do gráfico (amarelo), mas eu posso escolher a cor de base, por exemplo:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15,45,55&chs=320x200&chdl=IE6|Firefox|IE7|Chrome|Safari|Opera
&chco=c60000" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,12,20,5,20,15&chs=320x200&chdl=Corel|Adobe|Apple|Microsoft|Sun|Sony
&chco=1da3f8" alt="" />


Usando gradiente

Outra maneira de definir as cores do gráfico é usando um gradiente. Para isso basta usar o parâmetro chco para passar 2 cores diferentes, separadas por vírgulas. Seu gráfico será apresentado com as cores formando um gradiente que inicia com a primeira cor e finaliza com a segunda:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:15,23,45,20,20,15&chs=320x200&chdl=NYTimes|Le Monde|AS|Estadão|Folha de SP|LATimes&chco=c60000,1da3f8" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:5,32,45,20,20,15&chs=320x200&chdl=Brasil|EUA|Japão|Itália|Alemanha|China
&chco=58e015,fffc00" alt="" />



Definindo uma cor para cada valor

Por fim, é possível ainda definir uma cor para cada um dos intervalos do gráfico, para isso basta passar para o parâmetro chco cada uma das cores, seguindo a mesma ordem dos valores, separadas por “|”:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=320x200&chdl=China|França|México|Brasil
&chco=c60000|1da3f8|58e015|fffc00" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=340x200&chdl=Janeiro|Fevereiro|Março|Abril
&chl=45%|20%|20%|15%&chco=67087b|e3007a|00a8eb|79c471" alt="" />


Finalizando com background e margens

Para finalizar o seu gráfico e deixá-lo perfeito você pode ainda usar mais 2 parâmetros bem simples para definir a cor do background do gráfico e suas margens. Veja como:

Background

Se a cor de fundo de seu site não é o branco (padrão de background dos gráficos), você pode customizá-la usando o parâmetro chf. Basta passar o valor da cor desejada, precedida por bg,s, dessa maneira: chf=bg,s,dddddd;

Margens

O parâmetro que define as margens do gráfico (chma) também é bem simples, você deve passar os valores desejados em pixels, separados por vírgula, seguindo esta ordem: esquerda,direita,superior,inferior|largura_da_legenda,altura_da_legenda. Um bom exemplo seria: chma=20,20,20,30|100,20.
Abaixo um gráfico usando estes dois últimos parâmetros, de cor de fundo e de margens:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=660x300&chl=45%|20%|20%|15%&
chdl=Janeiro|Fevereiro|Mar%C3%A7o|Abril&chco=c60000|1da3f8|58e015|fffc00&chf=bg,s,dddddd&
chma=20,20,00,30|100,20" alt="" />


Conclusão

Como dá para ver nos exemplos e na quantidade de opções de customização e combinações possíveis, é claro o potencial dessa API para agilizar e facilitar a vida de quem volta e meia precisa fazer um gráfico para seus artigos, notícias e sites, ou mesmo integrar com um banco de dados para criação dinâmica dos gráficos. Além da facilidade em usar uma API já pronta e muito bem feita, temos a segurança que vem do fato dela ser uma criação do Google e ser hospedada por ele, garantindo estabilidade e quase 100% de disponibilidade. Não há limite para o número de requisições que você pode fazer por dia, o Google só pede para que você avise (chart-api-notifications@google.com) caso sua necessidade seja maior que 250.000 chamadas por dia.

Se você gostou mas acha que ainda não dá pra usar essa ferramenta por conta de alguma outra necessidade que ela não cobre, vale a pena dar uma olhada na sua documentação completa, pois o intuito aqui era apenas de dar uma introdução, existem dezenas de outras configurações possíveis.

E se bateu aquela preguiça de escrever tantos parâmetros, você pode usar o Chart Wizard, ferramenta disponibilizada pelo Google para criação de gráficos baseados nessa API. Porém, recomendo que você leia bem o tutorial e a documentação para que não precise ficar voltando ao assistente toda vez que precise de uma pequena alteração ou variação do gráfico. E claro, um desenvolvedor que se preze tem que entender o que está fazendo.

No próximo post sobre essa API vou mostrar como criar gráficos de barras.

Observação

O tamanho dos gráficos, eis o calcanhar de Aquiles da Charts API: quando usamos gráficos com mais de um elemento (labels + legendas) o sistema tem certa dificuldade em acomodá-los sem que nenhum deles seja cortado. Então algumas vezes é preciso dar “uma mãozinha” e fazer pequenos ajustes no tamanho das imagens para uma perfeita visualização. Se isso acontecer com você, tente alterar a largura ou altura do gráfico, não é difícil de resolver.




Você gostou deste post?






Posts relacionados

Posts Populares


  • Pingback: Como criar um QR Code em 1 minuto - Top rated never dies()

  • http://Seuwebsite Leandro

    Cara você explicou muito bem! To até pensando em usar mesmo essa API da Google, o problema que tenho por enquanto é devido a privacidade já que seria usada em um sistema restrito.

    Parabéns pelo site! Continue com os posts, que vou contumeiramente passar por aqui!!! Valew!

  • http://www. Edvaldo

    Parabéns pelo artigo.

    Estou usando o Google Chart Tools para fazer um Gráfico de Pizza. No entanto, preciso que os percentuais venham de um outro site qualquer, atualizados por um banco de dados, por exemplo. Não sei como fazer para alimentar automaticamente o Google Chart Tools e atualizar o gráfico.

    Poderia dar uma luz? Muito Obrigado

  • Guto Weiand

     Olá estou estudando sobre a google chart API, e estou com um problema, diante do seu código acima estou tentando pegar dados de uma consulta mysql que tenho de meu site (php) e construir um grafico com ele, porém com os dados do retorno so consigo colocar os label no grafico mas os valores nao aparecem… tens alguma ideia….?

    Parabens pelo artigo mito bom e instrutivo…

  • FabioAsth

    Olá! Eu coloquei esse gráfico no meu site e também tive o mesmo problema. Às vezes não aparecia a legenda e às vezes não aparecia os valores.  A solcução é bem simples.  Quando passar os valores como parâmetros, os mesmos devem estar em ordem do maior para o menor. Tanto os percentuais, quanto os valores.  Dessa forma no meu site funciona perfeitamente.
    Observação: O meu site também é em php e utilizo o banco de bados MySql. 

  • Rafael

    Mesma dúvida do outro post,
    quando gero valores grande ex: 1584.84 e 15684.90 o gráfico se perde
    existe uma solução?

  • Ma_mayara128

    faz a conta??????

  • iara

    eu ADOREI!!! alias tem o q eu preciso  é propio me deu uma ideia bem legal p mim fazer com o meu irmao q nao cumpri as promeças e eu sou a caçula em rsrsrsrsrs

  • iara

    + eu gostei de  me deu varias iseia e´por isso q eu sou nerd é so resumi o q vc que

  • Pingback: Google Chart Tools (Pie Chart) + JSON + PHP + MySQL « Mateus Manosso Barszcz()

  • Gabrielle_07linda

    concordo com vc

  • Gustavolc84

    Não consigo gerar o gráfico quando os valores são grandes, por exemplo, 1000, 1500, etc. Já fizeram a mesma pergunta, mas não teve nenhuma resposta. Se alguém passou por esse problema, posta uma solução, por favor

  • http://jsantos.website.org/ Jefrey

    Excelente, cara. Ótimo tutorial.
    Sou programador e utilizo diversas APIs que a Google disponibiliza, mas nunca havia utilizado essa, que é muito interessante, e meu primeiro uso será hoje.
    Ótimo blog.

    Não acho bom falar que um tutorial é “uma merda” só porque não tem o que VOCÊ quer. Na boa, isso é muito egoísmo… Oras, todos os tutoriais têm que ser do seu jeito? Isto é sobre o Google Chart API. Está muito simplificado e de fácil entendimento. Se não encontrou o que queria, visite esse aqui: http://www.useaporradogoogle.com.br (pode clicar, existe mesmo, falo sério!).

  • Alan Francisco

    Não estou conseguindo deixar o gráfico colorido, quando tenho mais de dez itens. alguém pode me ajudar?
    Estou utilizando o googlechat para apresentar meus gráficos, porém quando coloco mais de dez barras no gráfico, ele não pinta as barras. alguém poderia me ajudar?o link do meu gráfico está abaixo:http://chart.apis.google.com/chart?chs=600×200&cht=bvs&chd=t:5,2,2,2,5,5,5,2,5,1&chdl=Qualidade+de+Ensino+5|Qualidade+do+corpo+docente+2|Beleza+do+campus+2|Infraestrutura+do+campus+2|Desenvolvimento+de+amizades+5|Qualidade+no+atendimento+5|Espiritualidade+5|Bom+relacionamento+com+a+comunidade+2|Seguranca+5|Outro+1&chl=5|2|2|2|5|5|5|2|5|1&chco=708090|D2691E|1874CD|2F4F4F|7FFFD4|B22222|FFFF00|FF3030|8B008B|D3D3D&chxr=1,0,5&chds=0,5&chg=25,25

  • Gualtercouto

    Parabens a equipe google. 

  • Bpnati

    Olá gostaria de saber como fazer gráficos de barras horizontais

  • Vitor Reis

    valeu, muito bom, me ajudou bastante.

  • Maria Clara

    Queria saber se tem como criar esses graficos a partir de uma serie de dados num arquivo TXT ou banco de dados do mysql. Grata

  • Anonymous

    na documentação no site do google tem todos os gráficos ae você pega os valores pela query e destribui no array e do array você joga nele é muito facil

    https://developers.google.com/chart/interactive/docs/gallery?hl=pt-br