Graficos en Jsp

6
UTP -1- Ing. Alberto Moreno C. GRAFICOS EN JSP Empleando la Librería JfreeChart, que tiene muy buena resolución , 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.

description

Graficos en Jsp con oracle , ejemplos demostrativos empleando la libreria grafica JfreeChart espero que sea de utilidad

Transcript of Graficos en Jsp

Page 1: Graficos en Jsp

UTP -1- Ing. Alberto Moreno C.

GRAFICOS EN JSP

Empleando la Librería JfreeChart, que tiene muy buena resolución , vamos a graficarlos datos de una tabla que se encuentra en Oracle.La tabla sesiones que tiene dos campos mes y venta ambos de tipo entero , crear laestructura y adicionar datos en forma aleatora.

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

Page 2: Graficos en Jsp

UTP -2- Ing. Alberto Moreno C.

Para ello vamos a realizar la conexión y desarrollar los servlets respectivos.

Creando la conexión utilizando la entidad session para almacenar los datos en unaArrayList.Conexión.javapackage 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","system","moreno");

System.out.println("Conectado a la base de datostest..."); System.out.println("Listo y esperando..."); } catch(SQLException ex1) { System.err.println("SQLException: " + "no conectado a laBDD Test: "+ex1.getMessage()); } }

//cerrar conexion BDD public static void cerrarBD(){ try{ rs.close(); con.close();

System.out.println("Se ha cerrado la conexion a laBDD."); }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();

Page 3: Graficos en Jsp

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 paraefectuar los gráficos de barras y lineales.GraLine

package miServlet;

import java.io.*;import java.net.*;

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

Page 4: Graficos en Jsp

UTP -4- Ing. Alberto Moreno C.

import Clases.*;

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 SerBarras2package miServlet;

import java.io.*;import java.net.*;

import javax.servlet.*;import javax.servlet.http.*;

import org.jfree.chart.*;import org.jfree.data.category.*;import org.jfree.data.*;import org.jfree.chart.plot.*;import java.awt.Color;import Clases.*;public 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());

}

Page 5: Graficos en Jsp

UTP -5- Ing. Alberto Moreno C.

JFreeChart chart = ChartFactory.createBarChart3D("Grafica deVentas","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 respectivosTipos.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=UTF-8"> </head> <body> <form name="fr" action=""> </form> <table>

Page 6: Graficos en Jsp

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>