Utilizando a API Google Charts

Hoje, organizar dados de forma bonita e que não assuste as pessoas é um desafio para muitos desenvolvedores. Existem muitas APIs para nos ajudar nessa tarefa, hoje vamos conhecer uma que está sendo muito usada devido sua agilidade e, claro, por levar o logo do Google.

Essa API além de ser uma mão na roda, tem algumas vantagens como, por exemplo, você poder gerar os gráfico em SVG e poder pre-compilar os dados (no caso para gráfico gigantes), no próprio servidor da Google, além de deixar o seu dashboard com algumas funções e com aquela cara amigável que o Google Analytics tem.

Bem, para começar a utilizá-la só precisamos importa-la direto do servidor para o nosso site:



Agora dentro de uma nova tag script, vamos carregar o tipo de gráfico precisamos:



Notem que não precisamos declarar o objeto “google”, dentro do pacote que importamos, ele já esta como obj static ,funcionando como uma especie de singleton, assim ele só carrega e compila os pacotes que enviamos, isso economiza, e muito, a memoria do navegador, já que ele nunca vai carregar tudo.

No caso do método load, primeiro passamos o parâmetro “visualization”, que se encarrega de carregar os pacotes gráficos do google, logo em seguida passamos a versão que vamos usar, no caso a “1.0″, a versão atual dessa lib e por ultimo quais packages vamos importar, vamos pegar o ‘corechart’ que seria o pacote de gráficos mais simples.

Só depois que a função terminar de carregar os pacotes que chamamos, é que poderemos montar o gráfico, como não sabemos quanto tempo isso demora, podendo ter variações por conta da conexão do usuário e para a página não ficar travado enquanto esperamos, essa API tem um função de call-back.



Com essa chamada de callback, vamos enviar qual ação será tomada depois que tudo foi carregado, podemos criar uma chamada dentro dela ou informar um nome de função, vamos informa o nome da função, que vai se chamar “desenharMeuGrafico”.

Agora precisamos criar a função de nome “desenharMeuGrafico”:



Como essa função só vai ser chamada depois que se tem certeza que todas as libs foram carregadas, podemos colocar toda a parte para gerar e compilar dados nela.

Primeiro vamos iniciar a variável “grafico”, com isso setamos quais colunas e dados vamos mostrar no gráfico, depois criamos a variável “opcao”, aonde passamos o tamanho e o titulo do nosso gráfico.

Agora vamos criar a variável “desenho”, nela escolhemos o tipo de gráfico para ser renderizado, no caso escolhemos o “PieChart”, o famoso gráfico pizza, e logo em seguida passamos como parâmetro o objeto da DIV aonde queremos que o gráfico fique.



Nesse trecho de código fizemos apenas um gráfico usando apenas os recursos mais básicos que essa API oferece, se olharmos a documentação dela mais afundo, podemos notar que temos infinitas possibilidades com ela, como animações e prever eventos em cima dos gráfico que criamos, com isso podemos fazer Dashboards cada vez mais interativos.