Artigo Java Magazine 61 - Gráficos em Sistemas Web

Gráficos em Sistemas Web

Criando gráficos para aplicações web com diferentes tecnologias

Crie gráficos de diversos tipos para a sua aplicação web utilizando as tecnologias Javascript, Flash e JFreeChart

De que se trata o artigo:

O artigo apresenta um conjunto de técnicas para criação de gráficos em sistemas web.

Para que serve:

Para a criação de gráficos em sistemas web utilizando tecnologias como Javacript, Flash e JFreeChart.

Em que situação o tema é útil:

Quando se deseja implementar gráficos em sistemas Web e não se sabe exatamente como fazê-lo ou que tecnologias são mais apropriadas. O artigo apresenta três métodos e suas respectivas vantagens e desvantagens.

Gráficos em Sistemas Web - Resumo Devman:

O artigo apresenta três métodos para criação de gráficos em sistemas web. O primeiro utiliza o Flot, um plugin para a biblioteca Javascript JQuery, que desenha gráficos em um elemento HTML canvas. Este plugin possibilita a criação de gráficos em barras e linhas, além de mecanismos de interação com usuário através de Ajax. O segundo método utiliza a tecnologia Flash e funciona através do uso de uma classe utilitária para definição dos dados e tipos de gráficos a serem renderizados. Por fim, a biblioteca Cewolf, baseada no JFreeChart, é apresentada ao leitor, para a criação de gráficos com a linguagem Java.

A visualização de dados em forma de gráficos é um requisito bastante comum em sistemas de software. Muitas vezes é necessário mostrar listas de valores ou tabelas como gráficos em barras, gráficos em forma de pizza ou gráficos de linha. Em sistemas web, existem diversas formas de criar tais gráficos, e isso pode ser feito utilizando diferentes tecnologias; o que exige do programador saber escolher bem o método a ser utilizado. Neste artigo, ajudaremos o programador nessa escolha, mostrando como criar gráficos com três diferentes tecnologias: Adobe Flash™, JFreeChart e Javascript.

Para a criação dos gráficos que serão mostrados como exemplo, utilizaremos os dados reproduzidos nas Tabelas 1 e 2. A Tabela 1 refere-se à evolução do crescimento da população da cidade de Natal/RN no período 1940 - 2000 e projeção da população em 2005 e 2015.

Tabela 1. Evolução da População de Natal/RN (Fonte: SEMPLA, 2003)

Já a Tabela 2 refere-se à evolução do fluxo turístico na grande Natal no período 1999 - 2003. Para esses dados, serão criados gráficos do tipo barras, linhas e pizza.

Tabela 2. Fluxo Turístico na Grande Natal/RN (Fonte: SETUR apud SECTUR, 2003)

Gráficos em Javascript

A criação de gráficos em aplicações Web com Javascript é feita através da utilização de um elemento HTML denominado Canvas. Este elemento possui a função de delimitar uma região para se desenhar gráficos vetoriais dinamicamente. O acesso à área de desenho (limitada por uma altura e largura) é feito através de um conjunto de funções Javascript. A seguir, apresentaremos a criação de um gráfico no formato pizza, utilizando Canvas e Javascript.

Considere, na Listagem 1, o trecho de código HTML no qual será exibido o gráfico no formato pizza. Observe que nesta listagem simplesmente definimos o elemento

1.  <canvas id="grafico" width="500" height="250">

2.  

3.  </canvas>

A Listagem 2 apresenta uma função Javascript que organizará os dados que irão compor o gráfico em pizza e, em seguida, exibirá o gráfico gerado na região canvas definida na Listagem 1.

O primeiro argumento da função grafico() é idCanvas, o identificador no código HTML do elemento canvas onde será exibido o gráfico. O segundo argumento, dados, é um vetor com os dados que irão compor as fatias do gráfico em pizza. Já o terceiro, cores, corresponde às cores que cada fatia do gráfico em pizza irá assumir.
 

A variável canvas"