sexta-feira, 6 de agosto de 2010

Graficos dinâmicos para web com Cewolf

Cewolf é um framework para desenvolvimento de gráficos para web jsp/servlet utilizando o padrão MVC. Temos uma classe para gerar os dados do gráfico e um arquivo jsp para exibição do mesmo. Neste tutorial utilizarei o gráficos do tipo ‘timeseries’.
Primeiro é necessário baixar os arquivos e colocá-los no classpath do projeto:
http://cewolf.sourceforge.net/new/index.html

Copie também os arquivos TLD do cewolf para a pasta WEB-INF.
Neste exemplo, a metodologia aplicada foi a seguinte:


Tenho um servlet que pega vários dados de outra página e com alguns desses dados, chamo o construtor da classe que gera os dados do gráfico (passando os dados que você quiser pelo construtor). A Classe trata os dados do gráfico e retorna um Dataset que será lido pelas tags do cewolf no jsp.

Vamos ao que interessa... Após alocado os jars no seu projeto, devemos configurar o web.xml conforme abaixo:

web.xml
<servlet>

<servlet-name>CewolfServlet</servlet-name> 

<servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>CewolfServlet</servlet-name>

<url-pattern>/cewolf/*</url-pattern>

</servlet-mapping>

Uma vez configurado, criemos a classe de dados do gráfico...

Dataset.java
import java.io.Serializable;
import java.util.Date;
import java.util.Map;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import org.jfree.data.category.CategoryDataset;
import org.jfree.data.time.Minute;
import org.jfree.data.time.TimeSeries;
import org.jfree.data.time.TimeSeriesCollection;

import de.laures.cewolf.DatasetProduceException;
import de.laures.cewolf.DatasetProducer;

import de.laures.cewolf.links.CategoryItemLinkGenerator;
import de.laures.cewolf.tooltips.CategoryToolTipGenerator;

//Devemos implementar todos estas interfaces... 
public class Dataset implements DatasetProducer, CategoryToolTipGenerator, CategoryItemLinkGenerator, Serializable {

//A serie do gráfico é em TimeSeries
private TimeSeries series;

//Construtor que recebe como argumento um objeto vindo do servlet
//Para gráficos dinâmicos criei este construtor. O objeto passado pode ser o que quiser.
//No caso passei uma lista de um objeto com diversos valores de horas e dadas
public Dataset( List<MeuObjeto> listaDados  ){

// Instancia uma nova serie. O argumento é o nome da série
series = new TimeSeries( "nomeQueQuiserParaSerie" );


// Note que criamos UMA série apenas (acima), pois o gráfico só terá uma linha (série) de exibição. 
// Se quisermos mais linhas (séries), basta criarmos novos TimeSeries. 
// Ex. TimeSeries serie1 = new TimeSerie( "nomeDaSerie1" );
// Ex. TimeSeries serie2 = new TimeSerie( "nomeDaSerie2" );

// Percorre cada objeto da lista e adiciona os dados na série
for( MeuObjeto d : listaDados ){


//Adicionamos os dados do objeto na série 
series.add( new Minute( d.getMinuto(), d.getHora(), d.getDia(), d.getMes(), d.getAno(), d.getValor() ); 

// O Método acima "series.add( )" possui dois argumentos, um com RegularTimePeriod e outro com o valor *da série. 
//O RegularTimePeriod pode ser um "new Day(), new Hour(), new Minute(), etc" basta saber que 
//tipo de dados vai usa. Para saber mais acesse a API da classe RegularTimePeriod (jogue o nome no *google)

}
}

//Este é o método mais importante. Aqui é gerado o objeto Dataset para o jsp montar o grafico
public Object produceDataset(Map arg0) throws DatasetProduceException {

//TimeSeriesCollection é onde armazenamos todas as séries do nosso grafico.
//Todo tipo de gráfico, seja ele pizza, barra, etc, possui um dataset específico.
TimeSeriesCollection dataset = new TimeSeriesCollection();

dataset.addSeries( series );
return dataset;
}

private static final Log log = LogFactory.getLog(Dataset.class);


//Não utilizei este método
public String getProducerId() {
// TODO Auto-generated method stub
return null;
}

//Este método é apenas atualizar o gráfico a cada intervalo de X milisegundos
//No exemplo, utlizei 5 segundos (5000 milli)
public boolean hasExpired(Map arg0, Date since) {

log.debug(getClass().getName() + "hasExpired()");
return (System.currentTimeMillis() - since.getTime()) > 5000;

}

//Não utilizei este método

public String generateToolTip(CategoryDataset arg0, int arg1, int arg2) {

// TODO Auto-generated method stub
return null;
}

//Não utilizei este método

public String generateLink(Object arg0, int arg1, Object arg2) {
// TODO Auto-generated method stub
return null;
}
}

Construida a classe Dataset, chamaremos a jsp que exibira o gráfico. O código abaixo pode ser
inserido em qualquer parte da sua página.

exibeGrafico.jsp

<cewolf:chart id="line" title="Titulo do Grafico" type="timeseries" xaxislabel="Período" yaxislabel="Valor">

<cewolf:data> 

<cewolf:producer id="grafico"/> 

</cewolf:data>

</cewolf:chart>

<p>

<cewolf:img chartid="line" renderer="/cewolf" width="589" height="189"/> 


Agora exibirei a chamado que utlizei para exibir o gráfico.
Na minha servlet, em um determinado momento do código após tratar os dados chamo a classe Dataset ...

Servlet.java

//Códigos de servlet aqui...
//Mais alguns códigos aqui.... 

List<MeuObjeto> listaDados = // Aqui contém a lista de dados do objeto que quero passar...
Dataset dadosGrafico= new Dataset( listaDados );

//Envio para a jsp que vai exibir o gráfico o objeto dadosGrafico, onde dentro dele 
//possui o método que retorna um dataset já criado com os dados que o cewolf precisa.
request.setAttribute("grafico", dadosGrafico );
//Envio todos os objetos do request.setAttribute para a jsp /exibeGrafico.jsp....
RequestDispatcher dispatcher= request.getRequestDispatcher("/exibeGrafico.jsp");

dispatcher.forward( request, response );

Pronto.

Um comentário:

  1. Adriano, parabéns pela iniciativa. Depois de muito procurar na net esse foi o primeiro post que encontro bem comentado e que realmente esclarece dúvidas de iniciantes como eu. Vou tentar fazer o seu exemplo... mas não podia deixar de parabenizá-lo ... Obrigada.

    ResponderExcluir