Utilizando o Google Charts – Parte 3: Gauges

Seguindo com nosso estudo da API de gráficos do Google, neste post vou demonstrar como utilizar um componente utilizado por 10 entre 10 desenvolvedores corporativos que trabalham com dashboard’s, o Gauge. Trata-se daqueles relógios, ou velocímetros, que server para criar indicadores de acompanhamento de metas ou indicadores que necessitam estar dentro de limites de controles.

São principalmente muito úteis na criação de painéis, pois fornecem diversas informações sobre um mesmo elemento, e mais do que isso, são visualmente muito bonitos e impactantes. Portanto se você também quer impressionar seu chefe, mãos a obra.

O primeiro passo é carregar o pacote ‘gauge‘, correspondente aos gráficos do tipo Gauge.

google.load('visualization', '1', {packages:['gauge']});

O seguinte passo é a definição dos dados do gráfico. Este tipo de gráfico possui duas informações básicas: O label, ou texto do gráfico e o valor do gráfico, que posicionará a ‘agulha’ do mesmo. Portanto o DataTable para este tipo de gráfico deve possuir apenas duas colunas, sendo a primeira o Label, e a segunda os Valores. É possível criar em um único gráfico, diversos ‘velocímetros’, criando portanto diversos gauges sobre o mesmo componente chart. Para isso cada linha do DataTable representará um gauge diferente.

var data = google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['Memory', 80],
   ['CPU', 55],
   ['Network', 68]
]);

No caso acima, serão criados três Gauges, um exibindo a informação de Memória, o segundo CPU e o último Rede.

O último passo é a definição dos ranges (ou faixas) dos gráficos, e caso necessário, as faixas de cores do gauge.

var options = {
   width: 400, height: 120,
   redFrom: 90, redTo: 100,
   minorTicks: 5
};

No exemplo acima além das opções de altura e largura do gráfico, também é possível definir as faixas de valores para cada cor do gráfico, além do valor dos marcadores intermediários do mostrador dos Gauges.

Após as definições acima, basta apenas instanciar um novo componente chart e passar como parâmetro as informações de DataTable e options.

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);

Pronto! Nosso Gauge já está funcional!

Observação: O componente chart permite apenas um objeto de customização options. Portanto só é possível definir um valor para cada faixa de cor dos gráficos. Sendo assim se você necessita Gauges com distintos valores de faixas, será necessário criar distintos componentes chart e inserir cada um em uma respectiva <div>.

Abaixo o código completo do nosso exemplo. Não deixem de avisar caso tenham alguma dúvida. Abraços!

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

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.

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!