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:

nome

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

nome

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.

nome

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

nome

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.

nome

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.



Colunista

Richard Brochini

Richard Brochini, trabalha a 8 anos com desenvolvimento de projetos para TI. Vencedor da categoria Jogos Mobile na SBGames 2008, ganhador do prêmio Porto Seguro como melhor jogo on-line, vencedor de melhor jogo feito para Tv Digital da TOTVz, dentre outras competições. Formado em Ciência Da Computação pela Universidade Anhembi Morumbi ,Certificado pela Impacta Tecnologia. Procura sempre aprender novas tecnologias, com esse diferencial, está sempre capacitado para atender os principais projetos da área. Hoje em dia está muito empolgado com a onda Smart Watch e já desenvolveu alguns protótipos.
Para entrar em contato: Richard@brochini.com



Mais artigos sobre desenvolvimento web

ABRAWEB - Associação Brasileira de Profissionais de Internet | Av. Queiroz Filho, 1700 bl C, sl 411 - Vila Hamburguesa - São Paulo - SP CEP 05319-000 | CNPJ 05037868/0001-80 tel. 11 2368-2445