06
May
10

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í).

la estructura del proyecto sería algo así:

estruc

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.


15 Responses to “Gráficas con JSP II”


  1. 1 ARTURO PEREZ
    julio 1, 2010 a las 2:58 pm

    muy buen tuto..
    solo una sugerencia
    creo ke deberias de pensar en las personas
    que apenas estan adentrando al mundo de la programacion
    y hacer el tutorial paso a paso.

    saludos

    • julio 1, 2010 a las 3:53 pm

      viejo ARTURO PEREZ que le digo, no gracias por el coment y la sugerencia. pero es que ya después de dejarlo todo comentado y listo para descargas y usar, yo no hago mas. si de pronto no entiendes algo lo mas seguro es que este explicado en entradas anteriores o si algo pregunta que todo bien, aquí se le responde

  2. 3 ARTURO PEREZ
    julio 1, 2010 a las 4:37 pm

    bueno..
    como ejecuto el programa?
    que plataformas necesito?

    • julio 4, 2010 a las 8:49 am

      ups!
      bueno viejo tienes que instalar
      MySQL
      Tomcat 5.5 o superior
      el resto es copiar y pegar

  3. 5 edgar
    septiembre 3, 2010 a las 2:10 pm

    hola estoy checando tus manuales, me parecen muy buenos. solo q cuando quiero correr el ejercicio 10 me encuentro con este error:

    org.apache.jasper.JasperException: Ha sucedido una excepción al procesar la página JSP /index.jsp en línea 17

    14: model.setNombre(“root”);
    15: model.setClave(“”);
    16:
    17: model.conectar();
    18: application.setAttribute(“model”,model);
    19: }
    20: %>

    Stacktrace:
    org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:511)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:407)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:320)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:265)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)

    causa raíz

    javax.servlet.ServletException: java.sql.SQLException: Access denied for user ‘root’@’localhost’ (using password: NO)
    org.apache.jasper.runtime.PageContextImpl.doHandlePageException(PageContextImpl.java:898)
    org.apache.jasper.runtime.PageContextImpl.handlePageException(PageContextImpl.java:827)
    org.apache.jsp.index_jsp._jspService(index_jsp.java:109)
    org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:68)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:376)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:320)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:265)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)

    causa raíz

    java.sql.SQLException: Access denied for user ‘root’@’localhost’ (using password: NO)
    com.mysql.jdbc.SQLError.createSQLException(SQLError.java:1075)
    com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3562)
    com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3494)
    com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:920)
    com.mysql.jdbc.MysqlIO.secureAuth411(MysqlIO.java:4000)
    com.mysql.jdbc.MysqlIO.doHandshake(MysqlIO.java:1285)
    com.mysql.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:2186)
    com.mysql.jdbc.ConnectionImpl.(ConnectionImpl.java:787)
    com.mysql.jdbc.JDBC4Connection.(JDBC4Connection.java:49)
    sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:39)
    sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:27)
    java.lang.reflect.Constructor.newInstance(Constructor.java:513)
    com.mysql.jdbc.Util.handleNewInstance(Util.java:409)
    com.mysql.jdbc.ConnectionImpl.getInstance(ConnectionImpl.java:357)
    com.mysql.jdbc.NonRegisteringDriver.connect(NonRegisteringDriver.java:285)
    java.sql.DriverManager.getConnection(DriverManager.java:582)
    java.sql.DriverManager.getConnection(DriverManager.java:185)
    org.Model.conectar(Model.java:71)
    org.apache.jsp.index_jsp._jspService(index_jsp.java:86)
    org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:68)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:376)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:320)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:265)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)

    Me encuentro en un proyecto pero parece ser q no me puedo conectar con Mysql, trabajo con MysqlWorkBench, gracias, saludos

    • septiembre 3, 2010 a las 4:54 pm

      perdon si me equivoco pero creo que Mysql WorkBench es un potente editor visual de bases de datos, pero debe existir una base de datos, el error esta en que en el modelo no te estas mandando los parámetros de conexión el encuentra la base de datos pero no se puede conectar por el password o el user revisa esa parte.

  4. 7 Cristian
    octubre 10, 2011 a las 9:25 pm

    Hey…. una consulta …..solo puedo ver la imagen generada desde el web browser del eclipse
    pero no de los otros navegadores……¿Es un problema del TOMCAT o le estoy seteando mal la ruta?

    Saludos y muchas gracias!!

    • octubre 11, 2011 a las 8:12 am

      Con la información que me has dado, te sugiero que en una etiqueta de texto, muestres la ruta de la imagen. eso debe funcionar independientemente del navegador que uses

  5. 9 Hector
    julio 22, 2012 a las 1:50 am

    Hola excelente tuto, el link de descarga no funciona podrias repararlo gracias.
    Tengo problemas con Model.java te agradeceria que reparas el link.

  6. 10 fcr
    enero 29, 2013 a las 3:29 pm

    No muestra la imagen de la grafica a la hora de ejecutar la pagina “index.jsp” solo mestras estos
    valores:–> 26 27 32 33
    28 DIAGRAMA DE GASTOS POR DEPARTAMENTOS
    29 30 31
    si guarda la imagen de la grafica en la ruta que le especifico pero la guarda vacia sin valores ni barras.
    ¿que cera lo que esta sucediendo..?

  7. febrero 24, 2013 a las 1:41 am

    oyes podrias resubir el proyecto por que el enlace esta roto

    • marzo 6, 2013 a las 9:16 am

      listo todos los archivos están en una carpeta llamada Ingenio DS en el SkyDrive

      https://skydrive.live.com/?cid=C8207BFD0C416BE6&id=C8207BFD0C416BE6%21154

      • abril 9, 2013 a las 2:18 pm

        existe en el paquete org 2 archivos los cuales tienen extension .class pero no los puedo modificar, ya que al modificar los archivos Model.java y util.java el proyecto se sigue ejecutando sin ningun cambio

  8. 14 joxue
    noviembre 7, 2014 a las 11:08 am

    Como puedo editar el archivo Model.class


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


I+Ds

Dudas consultas
Facebook
Twiter
Google +

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevas publicaciones por correo.

Únete a otros 348 seguidores

Ingenio DS en Facebook

Redes Sociales y Archivos

Entradas

mayo 2010
L M X J V S D
« Abr   Jun »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

IngenioDS en twiter


A %d blogueros les gusta esto: