Gráficas con JSP II

En entradas anteriores cometimos un error (por así decirlo) utilizamos servlets sin haber ido paso a paso en esta entrada realizaremos una gráfica en jsp sin necesidad de usar servlets. para poder graficar utilizamos la jfreechart que es una librería especializada en graficas podemos descargarla (descárgala aquí) e internamente la jfreechat utiliza a la jcommon (descárgala aquí), para sacar los datos de la base de datos (mysql) necesitamos un driver de conexión (descárgalo aquí).

(DESCARGA LISTO PARA USAR)

la estructura del proyecto sería algo así:

usamos esta base de datos
ejercicios:

# --------------------------------------------------------
# Host:                         localhost
# Database:                     ejercicios
# Server version:               5.1.36-community-log
# Server OS:                    Win32
# HeidiSQL version:             5.0.0.3222
# Date/time:                    2010-05-09 19:09:45
# --------------------------------------------------------

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
# Dumping database structure for ejercicios
CREATE DATABASE IF NOT EXISTS `ejercicios` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `ejercicios`;

# Dumping structure for table ejercicios.departamento
CREATE TABLE IF NOT EXISTS `departamento` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(50) NOT NULL DEFAULT '',
  `descripcion` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=latin1;

# Dumping data for table ejercicios.departamento: 11 rows
/*!40000 ALTER TABLE `departamento` DISABLE KEYS */;
INSERT INTO `departamento` (`id`, `nombre`, `descripcion`) VALUES (1, 'SISTEMAS', 'ENCARGADO DE MANTENER LAS REDES Y DE DESARROLLAR APLICACIONES PARA LA ORGANIZACION'), (2, 'CONTABILIDAD', 'ENCARGADO DE GESTIONAR TODA LA PARTE CONTABLE DE LA ORGANIZACION, LAS ENTRADAS Y SALIDAS DE DINERO Y MUEBLES SE REGISTRAN AQUI'), (3, 'SERVICIOS GENERALES', 'ESTE DEPARTAMENTO ES EL ENCARGADO DE LA ADECUACION Y MANTENIMIENTO DE LA PLANTA FISICA DE LA ORGANIZACION'), (4, 'ADMINISTRACION', 'ESTE DEPARTAMENTO SE ENCARGA DE LA GERENCIA Y TOMA DE DECICIONES DE LA ORGANIZACION'), (5, 'VENTAS', 'ESTE DEPARTAMENTO SE ENCARGA DEL ASESORAMIENTO COMPLETO A CLIENTES, POTENCIALES CLIENTES Y PERSONAS QUE MUESTREN CUALQUIER TIPO DE INTERES O NECESIDAD, SOBRE CUALQUIERA DE LOS SERVICIOS O PRODUCTOS OFRECIDOS POR LA ORGANIZACION'), (6, 'RECURSOS HUMANOS', 'ESTE DEPARTAMENTO SE ENCARGA DE SELECCIONAR Y EVALUAR EL PERSONAL PARA CUMPLIR A CABALIDAD EL OBJETIVO DE NUESTRA ORGANIZACION');
/*!40000 ALTER TABLE `departamento` ENABLE KEYS */;

# Dumping structure for table ejercicios.empleado
CREATE TABLE IF NOT EXISTS `empleado` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(100) NOT NULL DEFAULT '',
  `apellido` varchar(100) NOT NULL DEFAULT '',
  `identificacion` int(20) NOT NULL DEFAULT '0',
  `departamento` varchar(100) NOT NULL DEFAULT '',
  `sueldo` double NOT NULL DEFAULT '0',
  `transporte` double NOT NULL DEFAULT '0',
  `fdn` date NOT NULL DEFAULT '2010-01-01',
  `foto` varchar(100) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

# Dumping data for table ejercicios.empleado: 6 rows
/*!40000 ALTER TABLE `empleado` DISABLE KEYS */;
INSERT INTO `empleado` (`id`, `nombre`, `apellido`, `identificacion`, `departamento`, `sueldo`, `transporte`, `fdn`, `foto`) VALUES (1, 'Mauro Cesar', 'Gomez Mejia', 1047381742, '1', 850000, 50000, '1986-07-12', '1273120244484avartaryahoo.bmp'), (2, 'Sandra Patricia', 'Pinedo Florez', 1562153142, '2', 850000, 50000, '1983-03-02', '1273120579281Dibujo.bmp'), (3, 'Cesar Augusto', 'Anaya Boorguez', 1225456345, '4', 850000, 50000, '1975-08-21', '1273121305343images.jpg'), (4, 'Javier Andres', 'Ibarra Lopez', 1045124563, '1', 950000, 50000, '1979-09-17', '1273206286625F200811201452292577871692.jpg'), (5, 'Esher Patricia', 'Molina Ordoñez', 1234542154, '3', 650000, 50000, '1978-11-30', '1273247967593conserje-scrubs.jpg'), (6, 'David Eduardo', 'Palomino Castro', 1201212542, '6', 650000, 50000, '1986-06-06', '127334048328125299_381812654054_667059054_3891187_3653774_n.jpg');
/*!40000 ALTER TABLE `empleado` ENABLE KEYS */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

tenemos 2 paginas una la index.jsp donde se inicializa la conexión a la base de datos y la grafica.jsp donde se llaman a los métodos necesarios para realizar una correcta visualización de la gráfica de unos valores guardados en la base de datos.

index.jsp

<%@ page import="org.Model"%>
<html>
	<head>
		<title>GRAFICAS CON JSP Y JFREECHART</title>
		<style type="text/css"><%@ include file="estilo.css"%></style>
		<!--En este ejercicio repasaremos por todas las funciones vistas anteriormente -->
	</head>
	<%
	Model model= (Model)application.getAttribute("model");
	if(model==null){
		model= new Model();
		/*le pasamos los parámetros para conectar a la BD*/
		model.setDriver("com.mysql.jdbc.Driver");
		model.setUrl("jdbc:mysql://localhost:3306/ejercicios");
		model.setNombre("root");
		model.setClave("");

		/*nos conectamos a la BD*/
		model.conectar();
		/*lo guardamos en la application*/
		application.setAttribute("model",model);
	}
	%>
	<body>
		<table width="100%" border="0" cellspacing="0" cellpadding="5">
			<tr>
    			<td valign="top" align="center">
					DIAGRAMA DE GASTOS POR DEPARTAMENTOS<br>
					<!--Llamamos a la pagina que se encarga de mostrar la imagen-->
					<jsp:include page="grafica.jsp"/>
				</td>
  			</tr>
		</table>
	</body>
</html>

la lógica para mostrar la imagen esta dividida tenemos parte en esta pagina y un método en la clase Util pero en esta pagina tomamos un dataset (los nombre de los datos con sus valores).

grafica.jsp

<%@ page import="org.Model"%>
<%@ page import="org.Util"%>

<%@ page import="java.util.HashMap"%>

<%@ page import="java.io.File"%>

<%@ page import="org.jfree.chart.ChartFactory"%>
<%@ page import="org.jfree.chart.ChartUtilities"%>
<%@ page import="org.jfree.chart.JFreeChart"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="org.jfree.data.category.DefaultCategoryDataset"%>

<%
	/*rescatamos el modelo de conexion*/
	Model model=(Model)application.getAttribute("model");

	/*conseguimos los datos de la bd*/
	HashMap mapa= model.consultaCostoNomina();
	/*los convertimos en dataset*/
	DefaultCategoryDataset dataset =Util.convertirHashMapADataset(mapa,"Costo por mes");
	/*Creamos el grafico*/
 	JFreeChart chart = ChartFactory.createBarChart("Nomina por departamento", "Departamento", "Costo nomina", dataset, PlotOrientation.VERTICAL, true, true, true);
	/*lo guardamos como un archivo PNG en la direccion especificada por el objeto File*/
 	ChartUtilities.saveChartAsPNG(new File("c:/Archivos de programa/Apache Software Foundation/Apache Tomcat 6.0.24(stand)/webapps/ejercicio10/grafica.png"), chart, 700, 400);
%>
<!--Llamamos a la imagen -->
<img src="grafica.png"/>

por otro lado tenemos 2 archivos java; la model para conectarnos a la bd y en esta tenemos un método especial llamado consultaCostoNomina(), este método nos devuelve cuanto se gata en nomina cada departamento.

Model.java

package org;
import java.util.ArrayList;
import java.util.HashMap;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.DriverManager;

public class Model{

	private transient Connection co;
	private String driver = "com.mysql.jdbc.Driver";
	private String url = "jdbc:mysql://localhost:3306/ejercicios";
	private String nombre = "root";
	private String clave = "";
	private PreparedStatement pstmt = null;
	private ResultSet rs = null;

	public Model(){
		try {
			conectar();
		} catch (Exception ex){}
	}

	public void setDriver(String a) {
		driver = a;
	}

	public void setUrl(String a) {
		url = a;
	}

	public void setNombre(String a) {
		nombre = a;
	}
	public void setClave(String a) {
		clave = a;
	}

	public String getDriver() {
		return driver;
	}

	public String getUrl() {
		return url;
	}

	public String getNombre(){
		return nombre;
	}

	public String getClave(){
		return clave;
	}

	public void conectar() throws SQLException {
		if (driver == null) {
			throw new SQLException("Driver no cargado");
		}
		if (url == null) {
			throw new SQLException("URL invalida");
		}
		try {
			Class.forName(this.driver);
		} catch (ClassNotFoundException ex){
			desconectar();
			throw new SQLException("Error en la conexion, No cargo el Driver ");
		}
		co = DriverManager.getConnection(url,nombre,clave);
	}

	public void desconectar() {
		try {
			if (co != null) {
				co.close();
			}
			if (pstmt != null) {
				pstmt.close();
			}
			if (rs != null) {
				rs.close();
			}
		} catch (Exception ignorar) {}
	}

	public boolean estaConectado() {
			return (co != null);
	}

	public HashMap consultaCostoNomina() throws SQLException {
		HashMap mapa = new HashMap();
		try {
			String consulta="";

			consulta=consulta+"SELECT SUM(e.sueldo+e.transporte) AS costo , d.nombre AS departamento ";
			consulta=consulta+"FROM empleado e, departamento d ";
			consulta=consulta+"WHERE e.departamento=d.id ";
			consulta=consulta+"GROUP BY e.departamento";

			pstmt = co.prepareStatement(consulta);
			rs=pstmt.executeQuery();

			while(rs.next()){
				mapa.put(rs.getString("departamento"),rs.getString("costo"));
			}
		}finally{
			if (rs != null){
				rs.close();
			}
			if (pstmt != null) {
				pstmt.close();
			}
		}
		return mapa;

	}
}

y tenemos una java «Util.java» esta clase se encarga de tomar los valores de un HashMap y los pasa a un DataSet.

Util.java

package org;

import org.jfree.data.category.DefaultCategoryDataset;
import java.util.HashMap;
import java.util.ArrayList;

public class Util {

    public static DefaultCategoryDataset convertirHashMapADataset(HashMap mapa,String concepto ){
    	DefaultCategoryDataset dataset = new DefaultCategoryDataset();

    	ArrayList lista_llaves=new ArrayList(mapa.keySet());
		for (int i = 0; i<lista_llaves.size();i++){
			String llave=lista_llaves.get(i)+"";
			dataset.addValue( Double.parseDouble(mapa.get(llave)+""), concepto, llave);
 		}
 		return dataset;
    }
}

recursos usados

jfreechart

jcommon

driver mysql.