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!

 

Combinando diferentes tipos de gráficos do Adobe Flex através de grupos (Sets)

Uma coisa que impressiona a qualquer gerente ou diretor de empresas são os gráficos do Flex. Com apenas dois ou três gráficos bem feitos e alguns efeitos de transição é muito fácil aprovar qualquer novo projeto. Porém as coisas complicam um pouco quando os usuários começam a pedir “… ah, mas aqui não poderia ter um detalhe assim… ou então uma coluna que mostra-se um valor assado…”.
Realmente construir gráficos com o Adobe Flex é uma tarefa relativamente fácil, porém alguns tipos mais específicos de gráficos requer um pouco mais de atenção.

Neste post vou tratar sobre os grupos de séries de gráficos, utilizados para criar gráficos empilhados e principalmente combinar diferentes grupos de tipos de gráficos diferentes.
O que as vezes causa um pouco de confusão no aprendizado dos iniciantes em Flex são justamente as funcionalidades que existem para facilitar nossa vida. Vejamos como exemplo o código necessário para criar o seguinte gráfico empilhado:

<mx:ColumnChart type="stacked">
    <mx:series>
        <mx:ColumnSeries />
        ...
    </mx:series>
</mx:ColumnChart>

Para realizar o empilhamento do gráfico, basta configurar o parâmetro “type” como “stacked”. Acontece que esse não é um parâmetro da classe ColumnChart. A classe responsável pelo empilhamento é a classe ColumnSet, porém a classe ColumnChart faz esse trabalho sozinha, quebrando a serie em grupos e definindo o empilhamento.
Portanto a forma correta de criar o código acima seria:

<mx:ColumnChart>
    <mx:series>
        <mx:ColumnSet type="stacked">
            <mx:ColumnSeries />
            ...
        </mx:ColumnSet>
    </mx:series>
</mx:ColumnChart>

O nível de complexidade aumenta quando surge a necessidade de combinar tipos de gráficos diferentes ou mesmo diferentes formas de combinação de um mesmo tipo de gráfico. Nessa hora não tem para onde fugir: temos que utilizar os grupos de Set.

Os agrupamentos existem apenas para três tipos de gráficos: AreaSet, ColumnSet e BarSet.

Para exemplificar a utilização, imaginemos o seguinte gráfico, onde a necessidade é mostrar a quantidade estimada de vendas por mês e a quantidade atingida de vendas segmentado por tipo de venda.

Se não fosse utilizado o ColumnSet para separar os tipos de vendas da estimativa de vendas, o que veríamos seria uma única coluna com três divisões.
Os agrupamentos de séries também podem ser utilizados para combinar tipos diferentes de gráficos como por exemplo LineChart.

Veja a seguir o código utilizado no exemplo acima:

<?xml version="1.0"?>
<mx:Application xmlns:mx="<a href="http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml</a>"
>
  <mx:Script><![CDATA[
     import mx.charts.Legend;
     import mx.charts.ColumnChart;
     import mx.charts.series.ColumnSet;
     import mx.charts.series.ColumnSeries;
     import mx.collections.ArrayCollection;

     [Bindable]
     private var vendasData:ArrayCollection = new ArrayCollection([
        {mes:"Janeiro", vendas:120, diretas:45, indiretas:102},
        {mes:"Fevereiro", vendas:108, diretas:42, indiretas:87},
        {mes:"Março", vendas:150, diretas:82, indiretas:32},
        {mes:"Abril", vendas:170, diretas:44, indiretas:68},
        {mes:"Maio", vendas:250, diretas:57, indiretas:77},
        {mes:"Junho", vendas:200, diretas:33, indiretas:51},
        {mes:"Julho", vendas:145, diretas:80, indiretas:62},
        {mes:"Agosto", vendas:166, diretas:87, indiretas:48},
        {mes:"Setembro", vendas:103, diretas:56, indiretas:42},
        {mes:"Outubro", vendas:140, diretas:91, indiretas:45},
        {mes:"Novembro", vendas:100, diretas:42, indiretas:33},
        {mes:"Dezembro", vendas:182, diretas:56, indiretas:25}
     ]);
  ]]>
  </mx:Script>

  <mx:Panel title="Análise de Vendas" id="panel1" width="616" horizontalAlign="center">
     <mx:ColumnChart id="myChart" dataProvider="{vendasData}" showDataTips="true" width="100%" height="322">
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="mes"/>
        </mx:horizontalAxis>
       
        <mx:series>
                <mx:ColumnSeries yField="vendas"
                    displayName="Estimativa de Vendas"/>
                   
                <mx:ColumnSet type="stacked">
                    <mx:ColumnSeries
                        yField="diretas"
                        displayName="Vendas Diretas"/>
                    <mx:ColumnSeries
                        yField="indiretas"
                        displayName="Vendas Indiretas"/>
                </mx:ColumnSet>
               
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}" direction="horizontal"/>
  </mx:Panel>
</mx:Application>

Espero que tenham gostado!