Utilizando o Google Charts – Parte 1: Hello Charts

O Google Charts é uma poderosa ferramenta JavaScript para criação de diversos tipos de gráficos e que são facilmente implementados em páginas HTML, proporcionando uma excelente apresentação visual e que não requer instalação de componentes, uma vez que toda informação é processada pelo próprio Google.

Neste primeiro post abordarei a criação de um simples gráfico de pizza (ou torta, já que o nome em inglês é PieChart) mostrando como chamar a API, definir o tipo de gráfico e setar seus valores.

Para criar um gráfico são necessárias basicamente três bibliotecas: a API Google JSAPI, a biblioteca Google VIsualization e a biblioteca referente ao gráfico desejado. Estas bibliotecas podem ser carregadas utilizando as tags <script> na sua página HTML, da seguinte forma:

<!-- Carregando API JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Carregando a biblioteca Visualization e a biblioteca piechart
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);
  // ... criação do gráfico ...
</script>

O método load() possui os seguintes parâmetros:
‘visualization’: Carregando a biblioteca Google Visualization
‘1;0’: Versão atual da biblioteca
packages: lista com os nomes dos pacotes de gráfico desejados. O pacote ‘corechart’ é o mais básico, onde estão os gráficos do tipo pie, bar e column. Outros tipos de gráficos mais complexos fazem partes de outros pacotes, bastando apenas definir os pacotes desejados, como por exemplo o pacote de gráficos tipo tabela:

google.load('visualization', '1.0', {'packages':['corechart','table']});

A linha seguinte define qual método será chamado (drawchart) após a confirmação de resposta do google ao método load().

O próximo passo é definir o conjunto de dados para formar nosso gráfico. Para isso o pacote Visualization possui a classe DataTable que é uma tabela bidimensional, com linhas e colunas, onde cada coluna possui um tipo de dado, um ID opcional e um label opcional. Existem várias formas de se criar um DataTable e vamos explorar isso melhor em um próximo post.

Os dados no DataTable precisam estar organizados em um formato esperado pelo gráfico. Os gráficos mais simples como os tipos barra e coluna, necessitam de um tabela com no mínimo duas colunas, onde cada linha da tabela representará uma barra do gráfico. A primeira coluna da tabela sempre representará os textos descritivos do gráfico (ou seja, nosso eixo X no caso de um gráfico de colunas) e a segunda coluna representará os valores do gráfico (eixo Y no caso de um gráfico de colunas). Casa coluna adicional da tabela representaria uma distinta série em nosso gráfico, no caso de gráficos com múltiplas séries, mas isto também será tema de um futuro post.

A seguir um exemplo de código para popular um DataTable:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Filiais');
data.addRows([
  ['Norte', 3],
  ['Nordeste', 7],
  ['Sul', 12],
  ['Sudeste', 23],
  ['Centro-Oeste', 9]
]);

Todo gráfico pode ser customizado de diversas formas, e com os componentes do Google Charts não é diferente. Para configurar as customizações basta criar um objeto JavaScript com o nome e valor da propriedade desejada. Cada gráfico pacote possui uma série de propriedades e podem ser visualizadas na documentação dos gráficos, assim como as opções disponível para o PieChart. A seguir um exemplo de como definir a posição da legenda, o título do gráfico, opções de 3D e tamanho do gráfico.

var options = {
  'legend':'left',
  'title':'Vendas Por Região',
  'is3D':true,
  'width':400,
  'height':300
}

A respeito do tamanho do gráfico, podemos especificar esta propriedade em dois lugares: no HTML através do elemento <div>, ou nas opções do gráfico através do javascript. Se for especificado em ambos, o gráfico sempre vai tender a usar os tamanhos definidos no HTML, e se não for especificado, o gráfico pode não ser renderizado adequadamente.

O último passo é desenhar o gráfico. Para isso basta criar uma instância da classe do gráfico e executar o método draw(). Neste caso a classe utilizada é google.visualization.PieChart. O método construtor da classe do gráfico necessita de apenas um parâmetro, a referência ao elemento onde o gráfico será criado.

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Portanto neste caso é necessário criar um elemento HTML (normalmente um <div>) e atribuí-lo um ID, para que este possa ser referenciado no construtor da classe. Finalmente basta executar o método draw(), que possui dois parâmetros. O primeiro é o DataTable, o objeto que contém os dados do gráfico, e o segundo é o objeto options, com as configurações de customização. O segundo parâmetro não é obrigatório.

Parabéns! Você acabou de criar seu primeiro gráfico utilizando o Google Charts Tools.

Abaixo está disponível o código completo (HTML e JavaScript) deste exemplo:

<html>
  <head>
    <!-- Carregando a API AJAX -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Carregando a API Visualization e os pacotes de gráficos
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Configurando o método que será executado quando a API for carregada
      google.setOnLoadCallback(drawChart);

      // Método onde será criado o DataTable,
      // configurado e inicializado o gráfico.
      function drawChart() {

	      // Criando o DataTable
	      var data = new google.visualization.DataTable();
		  data.addColumn('string', 'Região');
		  data.addColumn('number', 'Filiais');
		  data.addRows([
			['Norte', 3],
			['Nordeste', 7],
			['Sul', 12],
			['Sudeste', 23],
			['Centro-Oeste', 9]
		  ]);

	      // Opções de customizaçaõ
	      var options = {
			'legend':'left',
			'title':'Vendas Por Região',
			'is3D':true,
			'width':400,
			'height':300
		  }

	      // Instanciando e desenhando o gráfico, passando algunas opções
	      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
	      chart.draw(data, options);

	  }
    </script>
  </head>

  <body>
	<!-- Div onde será criado o gráfico -->
    <div id="chart_div" style="width:400; height:300"></div>

  </body>
</html>

E o resultado obtido:

Algumas considerações: Como podem ter observado, em nenhum momento instalamos nenhuma classe ou componente. Todo processamento para criação do gráfico é executado pelo próprio Google. Portanto para o correto funcionamento será sempre necessário uma conexão com Internet. Mesmo assim, esta solução me pareceu muito eficiente e tem funcionando perfeitamente.

Finalmente, para aqueles que querem começar JÁ a brincar com o Google Charts, não é necessário instalar nenhum ambiente de desenvolvimento. Podemos utilizar a própria plataforma do Google para isso. Através do Google Code Playground podemos testar vários modelos de gráficos e outros componentes do Google, alterar suas configurações e visualizar o resultado. É possível até mesmo executar o código em modo Debug. É uma ferramenta muito poderosa, e porque não divertida!

Pontanto, Hello Chart e mãos a obra!

 

Aplicações web mobile com gráficos em JavaScript com API do Google

Após a vitória do HTML5 na sua batalha contra o Adobe Flash e do funeral do nosso amigo Adobe Flex estive numa constante busca por boas ferramentas para desenvolvimento web, principalmente algo que nos traga a agilidade e produtividade que tínhamos com o Flex. Acredito que nem preciso citar que na atividade de criar gráficos o Flex era um lutador imbatível.

Mesmo com todas suas qualidades, o Flex ainda era dente de leite na categoria web mobile, que foi justamente uma das minhas últimas necessidades. Já a algum tempo tinha engavetado o projeto de criar uma versão mobile para nosso sistema e esta história de HTML5 acabou despertando a chama apagada.

Após comprar os livros “HTML5 – A linguagem de marcação que revolucionou a web” e principalmente “jQuery Mobile” começamos com nosso projeto. A princípio queria um desenvolvimento nativo. Até comecei a estudar o iOS, fiz um curso rápido de Android, mas quando o Windows Phone chegou forte percebi que seria muito trabalho pra uma equipe tão pequena aprender tantas linguagens. Então a decisão foi uma aplicação web, multiplataforma, que poderia atender todas nossas necessidades, visto que nosso sistema é basicamente um dashboard.

Nos surpreendemos com o jQuery Mobile, uma linguagem extremamente simples e poderosa. Sem falar do Codiqa, uma ferramenta fantástica para criar aplicações jQuery mobile com o nosso querido Drag & Drop.

Após definir nossa nova linguagem, veio o principal problema: “Qual componente usaríamos para criar os gráficos?” (aceito sugestões de possíveis componentes). Após um período de pesquisas encontramos alguns componentes gratuitos em javascript mas que possuiam poucas funcionalidades, encontramos alguns pagos porém não tínhamos orçamento para isso, e finalmente chegamos até o bom e velho Google Developers e descobrimos o Google Chart Tools API. Trata-se de uma API executada online que permite criar diversos tipos de gráficos, desde gráficos de Área, Barras, Linhas, até Gauges, Tabelas, Geográficos e Treemap.

Sua utilização é bastante simples. Basta incluir na sua página uma chamada ao arquivo javascript da página do google, criar seu conjunto de dados e executar os métodos correspondentes ao tipo de gráfico desejado, informando em qual div deverá ser criado o componente.

Os gráficos possuem diversas propriedades de customização e a documentação é bastante completa, o que ajuda em muito o trabalho. Porém sem dúvida nenhuma o que mais ajuda no desenvolvimento é o Google Code Playground, onde podemos simular e testar diversos componentes do Google realizando inclusive debug.

Nossa preocupação era apenas que assim como a API do Google Maps, esta também tivesse algum tipo de restrição como por exemplo na quantidade máxima diária de requisições. Porém verifiquei que este limite não existe, entretanto o Google se reserva o direito de bloquear o serviço em caso de uso indevido e abusivo. Bom, esperemos não ter problemas não é mesmo?

Posso afirmar que tem sido muito fácil utilizar estas ferramentas e nosso sistema está ficando ótimo. Já utilizamos gauges, gráficos de linha, área e colunas e até agora não tivemos nenhum problema quanto a desempenho.

Nos próximos post´s explicarei com maiores detalhes como utilizar a API e explicarei algumas customizações que aplicamos para conseguir alguns gráficos mais específicos.