Esse artigo faz parte da revista Java Magazine edição 58. Clique aqui para ler todos os artigos desta edição

Enriquecendo sua aplicação JSF com gráficos

Usando a biblioteca de componentes ChartCreator

Veja neste artigo como é simples utilizar o componente ChartCreator para criar diversos tipos de gráficos em aplicações JSF

Uma das maiores vantagens na adoção do JavaServer Faces é o encapsulamento da complexidade de criação de interfaces ricas. Seus componentes escondem grande parte do HTML, JavaScript e CSS, além do código necessário para responder as interações com o usuário. Atualmente existem diversas bibliotecas de componentes que oferecem as mais variadas funcionalidades como upload, gerenciamento de agenda, calendários e diversas outras necessidades, com ou sem AJAX. Em artigos anteriores já mostramos alguns componentes das bibliotecas RichFaces e IceFaces.

Neste artigo, apresentaremos um componente excelente para a geração de gráficos em aplicações JSF: o ChartCreator da biblioteca JSF-Comp, disponível para download no Source Forge.

 

Felizmente no eco-sistema JSF existem várias opções para praticamente todos os tipos de componentes. Vale a pena conferir a matriz de comparação destes componentes JSF no endereço http://www.jsfmatrix.net/, que tem um critério específico indicando se a biblioteca possui ou não componentes para geração de gráficos.

A biblioteca JSF-Comp e o componente ChartCreator

O ChartCreator faz parte da biblioteca JSF-Comp e uma das suas principais vantagens é a simplicidade. Esta biblioteca possui outros componentes interessantes como geradores de código de barras, validadores, exportação de dados de tabelas para formato XLS, entre outros. 

O ChartCreator suporta 27 tipos de gráficos. Muitos deles são variações dos tipos mais comuns como gráfico de pizza, barras e linhas, discutidos no tópico “Entendendo os principais tipos de gráficos”.

Dependências

O ChartCreator depende de duas outras bibliotecas, JFreeChart e JCommon. Por isto será necessário disponibilizar os seguintes jars, no diretório WEB-INF/lib, da sua aplicação:

·         chartcreator-1.2.0.jar

·         jfreechart-1.0.9.jar

·         jcommon-1.0.12.jar

 

Os endereços para download estão disponíveis na referência aos links no final do artigo.

Para utilizar o ChartCreator será necessário configurar o deployment descriptor como detalhado no quadro “Criando um projeto com JSF e ChartCreator no Netbeans”.

A fonte de dados: Controle de Projetos

Para exemplificar o uso de gráficos em aplicações Web, vamos trabalhar em um cenário de controle de projetos, com uma lista de projetos, colaboradores e os lançamentos de horas de cada colaborador em cada projeto (ver Tabela 1). O objetivo é analisar comparativamente o total de horas investidas em cada projeto e a participação de cada colaborador por projeto.

 

Projetos

Colaboradores

Lançamentos

Projeto 1

Ana

30 horas

Melissa

12 horas

Elaine

46 horas

Projeto 2

Ana

30 horas

Melissa

14 horas

Elaine

12 horas

Projeto 3

Ana

30 horas

Melissa

40 horas

Elaine

 3 horas

Tabela 1. Fonte de dados da aplicação para Controle de Projetos

 

Entendendo os principais tipos de gráficos

Um dos maiores desafios na implementação de gráficos nas aplicações é entender qual o melhor gráfico para mostrar a informação desejada. Existem diversos tipos diferentes de gráficos, que podem exigir fontes de dados diferentes. 

Antes de entrar nos detalhes do ChartCreator, vamos fazer uma introdução sobre os tipos de gráficos e as fontes de dados necessárias para gerar cada um deles.

Gráfico de pizza

O gráfico de pizza é um dos gráficos mais simples de se construir e ler, pois é desenhado a partir de uma tabela simples de duas colunas, uma com a série e outra com o valor total acumulado na série. Por exemplo, com a fonte de dados da Tabela 2 podemos gerar o gráfico apresentado na Figura 1.

 

Horas-colaborador no Projeto1

Colaborador (série)

Horas lançadas (valor total acumulado na série)

Ana

30

Melissa

12

Elaine

46

Tabela 2. Fonte de dados para o Projeto 1

...

Quer ler esse conteúdo completo? Tenha acesso completo