Criando Graficos Com JSP Cewolf Jfreechart Mysql
Criando Graficos Com JSP Cewolf Jfreechart Mysql
Criando Graficos Com JSP Cewolf Jfreechart Mysql
br
1. Introduo
O Cewolf (http://cewolf.sourceforge.net/) uma biblioteca que facilita a criao de grficos dinmicos em uma aplicao web, distribudo sob a licena LGPL. O Cewolf todo baseado no JFreeChart (http://www.jfree.org/jfreechart/index.html), pois ele aproveita os mesmos mecanismos de desenho dos grficos do JFreeChart. possvel gerar vrios tipos de grficos desde os mais simples, como de linha, barras, setoriais (pizza) at grficos combinados, em 3D, etc.
2 www.furutani.eti.br
Figura 2. Grfico setorial. Mais exemplos podem ser vistos no link: http://cewolf.sourceforge.net/new/demo.html
2. Ambiente de Desenvolvimento
Ser utilizado o Eclipse 3.2M3 (www.eclipse.org) , com os plug-ins do projeto Amateras. Os links para downloads, a instalao e configurao apresentada nesse link: http://www.guj.com.br/posts/list/31160.java A verso do Cewolf utilizada a 0.12.0 e a do Tomcat a 5.5.9. O MySQL( http://dev.mysql.com/ ) utilizado o 5.0.16. O driver do MySQL est junto com o material disponibilizado para download (http://www.furutani.eti.br/tutoriais/Graficos.zip).
3. Codificando
Inicialmente preciso dizer um pouco da organizao dos arquivos fontes feita dentro de eclipse. O arquivo disponibilizado para download(http://www.furutani.eti.br/tutoriais/Graficos.zip) contm um projeto para ser importado no eclipse, selecione menu file, Import/Export e utilize o wizard que bem intuitivo. Aps a importao abra o arquivo common.ant.properties, a primeira linha est assim:
Deploy.Dir=D:/tomcat-5.5.9/webapps
3 www.furutani.eti.br Os diretrios esto separados assim: Bin aqui ficam as classes compiladas. Dist aqui fica pacote war. Lib aqui ficam todas as bibliotecas utilizadas. Src aqui ficam os fontes .java Web ficam pginas jsp, css, javascript, etc. Web-inf onde fica o web.xml e um monte de outras coisas. O arquivo build.xml um script do ANT (http://ant.apache.org/) para automatizar o deployment da aplicao. Toda vez que vc fizer uma alterao no projeto, clique com o boto direito sobre o build.xml e selecione Run As, Ant build para empacotar toda a aplicao, criar o war e jogar no webapps do tomcat.
As libs que devem ser acrescentadas no classpath para que a aplicao funcione so:
Para a aplicao ser usada uma base de dados simples, como pode ser visto na figura abaixo.
4 www.furutani.eti.br
CREATE TABLE Pessoa ( idPessoa INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, Nome VARCHAR(100) NOT NULL, Cidade VARCHAR(50) NOT NULL, Estado VARCHAR(2) NOT NULL, PRIMARY KEY(idPessoa) );
CREATE TABLE Certificacao ( idCertificacao INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, Nome VARCHAR(10) NOT NULL, Descricao VARCHAR(100) NOT NULL, DataLancamento DATETIME NOT NULL, PRIMARY KEY(idCertificacao) );
CREATE TABLE Pessoa_has_Certificacao ( FK_idPessoa INTEGER UNSIGNED NOT NULL, FK_idCertificacao INTEGER UNSIGNED NOT NULL, DataExame DATETIME NOT NULL, Nota INTEGER UNSIGNED NOT NULL, PRIMARY KEY(FK_idPessoa, FK_idCertificacao), FOREIGN KEY(FK_idPessoa) REFERENCES Pessoa(idPessoa) ON DELETE NO ACTION ON UPDATE NO ACTION, FOREIGN KEY(FK_idCertificacao) REFERENCES Certificacao(idCertificacao) ON DELETE NO ACTION ON UPDATE NO ACTION );
Depois dessa apresentao, vamos prosseguir com o tutorial. Inicialmente temos que configurar e mapear o servlet responsvel por renderizar os grficos. No arquivo web.xml foram acrescentadas as seguinte linhas:
<servlet> <servlet-name>CewolfServlet</servlet-name> <servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class> <init-param> <param-name>storage</param-name> <param-value>de.laures.cewolf.storage.TransientSessionStorage</param-value> </init-param> <init-param> <param-name>overliburl</param-name>
5 www.furutani.eti.br
<param-value>overlib.js</param-value> </init-param> <!Torna o debug ativo --> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet>
Agora iremos criar um DatasetProducer para um grfico do tipo setorial (pizza) que ter o nome
CertificacaoEstadoDataSet.
Estado.
package br.eti.furutani.dataset;
import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.Date; import java.util.Map;
private static final long serialVersionUID = 1L; // vamos utilizar o log4j Logger log = Logger.getLogger(CertificacaoEstadoDataSet.class);
// Retorna uma Dataset com os dados que iro alimentar o grfico public Object produceDataset(Map arg0) throws DatasetProduceException {
PreparedStatement ps = null;
String query = "SELECT p.estado, COUNT(p.estado) as qtde FROM `pessoa_has_certificacao` phc "
6 www.furutani.eti.br
+ "INNER JOIN `certificacao` c ON c.idCertificacao = phc.FK_idCertificacao " + "INNER JOIN `pessoa` p ON p.idPessoa = phc.FK_idPessoa " + "GROUP BY p.estado"; try { // Recupera uma conexo com o banco Connection conexao = ConexaoMySQL.getConn(); ps = conexao.prepareStatement(query);
ResultSet rs = ps.executeQuery();
while (rs.next()) { // Inserindo no DataSet o estado e a quantidade de pessoas certificadas ds.setValue(rs.getString(1), new Double(rs.getInt(2))); } } catch (SQLException e) { log.info(e); } // retorna o DataSet return ds; }
// O dados deste dataset invalidado imediatamente. // O tempo de retorno influencia no cach de dados do cewolf // Retornando sempre true, os dados do dataset so sempre atualizados a cada request. public boolean hasExpired(Map arg0, Date arg1) { return true; // Se quisssemos que os dataset expirasse em 5 segundos colocaramos // return (System.currentTimeMillis() - since.getTime()) } > 5000;
// Retorna um Id nico para este dataset public String getProducerId() { return "CertificacaoPorEstado"; } }
Agora vamos desenvolver o JSP. As tags do Cewolf so bem fceis de usar. Em http://cewolf.sourceforge.net/new/taglib.html tem uma listagem completa das tags e os atributos suportados pelo cewolf.
<%@ taglib uri="/WEB-INF/cewolf-1.1.tld" prefix="cewolf"%> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> <title>Exemplo 1</title> </head><body> <! Criando um bean --> <jsp:useBean id="graficoDS" class="br.eti.furutani.dataset.CertificacaoEstadoDataSet"/>
<center><h3>GRFICOS DE PIZZA</h3></center>
7 www.furutani.eti.br
<!-- GRFICO SETORIAL/PIZZA --> <cewolf:chart id="grafico1" title="Certificaes por Estado" type="pie"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint> <cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico1" renderer="/cewolf" width="710" height="380"/>
<br/>
<!-- GRFICO SETORIAL/PIZZA EM 3D --> <cewolf:chart id="grafico2" title="Certificaes por Estado" type="pie3d"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint> <cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico2" renderer="/cewolf" width="710" height="380"/> </body> </html>
Duas relaes so importantes dentro desse monte de tags, a primeira a do id do jsp:useBean e o id do cewolf:producer. A segunda o id do cewolf:chart e o id do cewolf:img. Observe as flechas abaixo.
<jsp:useBean id="graficoDS" class="br.eti.furutani.dataset.CertificacaoEstadoDataSet"/> <cewolf:chart id="grafico1" title="Certificaes por Estado" type="pie"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint> <cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico1" renderer="/cewolf" width="710" height="380"/>
Agora iremos criar um novo grfico, para exibir a quantidade de tipos de certificaes por estado. O DatasetProducer vai se chamar PessoasCertificadasDataSet.
package br.eti.furutani.dataset;
9 www.furutani.eti.br
import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.Date; import java.util.Map;
// Retorna uma Dataset com os dados que iro alimentar o grfico public Object produceDataset(Map arg0) throws DatasetProduceException {
PreparedStatement ps = null;
String
query
"SELECT
COUNT(c.idCertificacao),
p.estado,c.Nome
FROM
`pessoa_has_certificacao` phc " + "INNER JOIN `certificacao` c ON c.idCertificacao = phc.FK_idCertificacao " + "INNER JOIN `pessoa` p ON p.idPessoa = phc.FK_idPessoa " + "GROUP BY p.estado,c.idCertificacao"; try {
ResultSet rs = ps.executeQuery();
while (rs.next()) { // Inserindo no DataSet a quantidade de pessoas certificadas, o nome da certf. e o estado. ds.addValue(rs.getInt(1), rs.getString(2), rs.getString(3)); } } catch (SQLException e) { log.info(e); }
return ds; }
10 www.furutani.eti.br
// O dados deste dataset invalidado imediatamente. O tempo de retorno influencia no cache do cewolf public boolean hasExpired(Map arg0, Date arg1) { return true; // Se quisssemos que os dataset expirasse em 5 segundos colocaramos // return (System.currentTimeMillis() - since.getTime()) } > 5000;
A maior diferena entre esse DatasetProducer para o outro que trocamos o DefaultPieDataset para o DefaultCategoryDataset. Vejam agora o JSP. A nica diferena para o JSP anterior o atributo type da tag cewolf:chart em azul.
<%@ page contentType="text/html; charset=iso-8859-1" errorPage="" %> <%@ taglib uri="/WEB-INF/cewolf-1.1.tld" prefix="cewolf"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> <title>Exemplo 2</title> </head> <body> <jsp:useBean id="graficoDS" class="br.eti.furutani.dataset.PessoasCertificadasDataSet"/>
<!-- GRFICO LINHAS E COLUNA --> <cewolf:chart id="grafico1" title="Certificaes por Estado" type="line" xaxislabel="Estado" yaxislabel="QTDE"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint> <cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico1" renderer="/cewolf" width="710" height="380"/>
<br/><br/>
11 www.furutani.eti.br
<cewolf:chart id="grafico2" title="Certificaes por Estado" type="horizontalbar3d" xaxislabel="Estado" yaxislabel="QTDE"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint> <cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico2" renderer="/cewolf" width="710" height="380"/>
<br/><br/>
<!-- GRFICO COLUNA 3D --> <cewolf:chart id="grafico3" title="Certificaes por Estado" type="verticalbar3d" xaxislabel="Estado" yaxislabel="QTDE"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint> <cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico3" renderer="/cewolf" width="710" height="380"/>
<br/><br/>
<!-- GRFICO DE AREA --> <cewolf:chart id="grafico4" title="Certificaes por Estado" type="area" xaxislabel="Estado" yaxislabel="QTDE"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint> <cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico4" renderer="/cewolf" width="710" height="380"/>
<br/><br/>
<!-- GRFICO COLUNA --> <cewolf:chart id="grafico5" title="Certificaes por Estado" type="stackedverticalbar3d" xaxislabel="Estado" yaxislabel="QTDE"> <cewolf:gradientpaint> <cewolf:point x="0" y="0" color="#FBFBFB" /> <cewolf:point x="350" y="0" color="#F3F3F3" /> </cewolf:gradientpaint>
12 www.furutani.eti.br
<cewolf:data> <cewolf:producer id="graficoDS" /> </cewolf:data> </cewolf:chart> <cewolf:img chartid="grafico5" renderer="/cewolf" width="710" height="380"/>
</body> </html>
incrvel
quantidade
de
grficos
diferentes
que
podemos
criar
com
13 www.furutani.eti.br
14 www.furutani.eti.br
4. Concluso
O Cewolf uma tima biblioteca para criar grficos na web, oferece facilidade e uma grande variedade de estilos de grficos.
5. Referncias
Site oficial, http://cewolf.sourceforge.net/new/index.html Tomcat, http://tomcat.apache.org/
15 www.furutani.eti.br Eclipse, http://www.eclipse.org/ JfreeChart, http://www.jfree.org/jfreechart/ GUJ, http://www.guj.com.br Fonte, http://www.furutani.eti.br/tutoriais/Graficos.zip Atualizado: sbado, 26 de novembro de 2005 as 20:49:31