UTP

-1-

Ing. Alberto Moreno C.

GRAFICOS EN JSP
Empleando la Librera JfreeChart, que tiene muy buena resolucin , vamos a graficar los datos de una tabla que se encuentra en Oracle. La tabla sesiones que tiene dos campos mes y venta ambos de tipo entero , crear la estructura y adicionar datos en forma aleatora.

Al hacer un click en barras va mostrar la siguiente grafica.

UTP

-2-

Ing. Alberto Moreno C.

Para ello vamos a realizar la conexin y desarrollar los servlets respectivos.

Creando la conexin utilizando la entidad session para almacenar los datos en una ArrayList. Conexin.java
package Clases; import java.sql.*; import java.util.*; public class Conexion { public static Connection con; private static ResultSet rs; private static Statement statement; private static SimpleDateFormat fecha, hora; /** Creates a new instance of Conexion */ public Conexion(){ conectar_bd(); } private void conectar_bd() { try { Class.forName("oracle.jdbc.driver.OracleDriver"); con= DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE","sys tem","moreno"); System.out.println("Conectado a la base de datos test..."); System.out.println("Listo y esperando..."); } catch(SQLException ex1) { System.err.println("SQLException: " + "no conectado a la BDD Test: "+ex1.getMessage()); } } //cerrar conexion BDD public static void cerrarBD(){ try{ rs.close(); con.close(); System.out.println("Se ha cerrado la conexion a la BDD."); }catch(SQLException e){ System.err.println("Error: "+e); } }

public List<Sessiones> Lee(){ List<Sessiones> lista=new ArrayList(); String sql = "Select x as meses, y as sesion from sesiones"; try{ statement = con.createStatement();

UTP

-3-

Ing. Alberto Moreno C.

rs= statement.executeQuery(sql); while(rs.next()){ lista.add(new Sessiones(rs.getInt(1),rs.getInt(2))); } rs.close(); }catch(SQLException e ){ System.err.println("Error: "+e); } return lista; }

La entidad Sessiones.java
public class Sessiones { private int mes; private int venta; public Sessiones(int a, int b){ mes=a; venta=b; } public int getMes() { return mes; } public void setMes(int mes) { this.mes = mes; } public int getVenta() { return venta; } public void setVenta(int venta) { this.venta = venta; } } Elaborar el paquete Miservlet y crear los servlet respectivos para efectuar los grficos de barras y lineales.

GraLine
package miServlet; import java.io.*; import java.net.*; import import import import import import import import import javax.servlet.*; javax.servlet.http.*; java.io.*; java.awt.Color; org.jfree.chart.*; org.jfree.chart.plot.*; org.jfree.chart.renderer.xy.XYLineAndShapeRenderer; org.jfree.data.xy.*; org.jfree.ui.*;

UTP
import Clases.*;

-4-

Ing. Alberto Moreno C.

public class GraLine extends HttpServlet { public static JFreeChart crearChart() { Conexion con=new Conexion(); String sql= "Select x as meses, y as ventas from sesiones"; XYSeries series = new XYSeries("Evolucion de ventas"); for(Sessiones x:con.Lee()){ series.add(x.getMes(), x.getVenta()); } XYDataset juegoDatos= new XYSeriesCollection(series); JFreeChart chart = ChartFactory.createXYLineChart("Grafico de Ventas", "Meses", "Importes", juegoDatos, PlotOrientation.VERTICAL, true,true,true); return chart; } protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("image/jpeg"); OutputStream salida = response.getOutputStream(); JFreeChart grafica = crearChart(); ChartUtilities.writeChartAsJPEG(salida,grafica,400,400); salida.close(); } }

GRAFICO PARA BARRAS SerBarras2

package miServlet; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; import import import import import import public org.jfree.chart.*; org.jfree.data.category.*; org.jfree.data.*; org.jfree.chart.plot.*; java.awt.Color; Clases.*; class SerBarras2 extends HttpServlet {

private JFreeChart crearChart() { DefaultCategoryDataset dataset = new DefaultCategoryDataset(); Conexion con=new Conexion(); String sql= "Select x as meses, y as ventas from sesiones"; for(Sessiones x:con.Lee()){ dataset.setValue(x.getMes(),"Ventas", ""+x.getVenta()); }

UTP

-5-

Ing. Alberto Moreno C.

JFreeChart chart = ChartFactory.createBarChart3D("Grafica de Ventas","Meses", "Ventas", dataset, PlotOrientation.VERTICAL, true,true, false);

chart.setBackgroundPaint(Color.yellow); chart.getTitle().setPaint(Color.blue); CategoryPlot p = chart.getCategoryPlot(); p.setRangeGridlinePaint(Color.red); return chart; }

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("image/jpeg"); OutputStream salida = response.getOutputStream(); JFreeChart grafica = crearChart(); ChartUtilities.writeChartAsJPEG(salida,grafica,500,500); salida.close(); }

A nivel de Cliente creamos una pagina HTML para llamar a los servlets respectivos Tipos.Html
<html> <head> <script> function

ver(op){

switch(op){ case 1:fr.action="SerBarras2"; break; case 2:fr.action="GraLine"; break; } fr.target="zona" fr.submit() } </script>

<title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF8"> </head> <body> <form name="fr" action=""> </form> <table>

UTP

-6-

Ing. Alberto Moreno C.

<tr><td>Tipos de Graficos Barras:<a href="#" onclick="ver(1)"> barras</a> <td> <a href="#" onclick="ver(2)">Lineales</a> <tr><td colspan="2"> <iframe name="zona" height="500" width="600"></iframe> </table> </body> </html>