You are on page 1of 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.


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 una
ArrayList.
Conexión.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 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.*;
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 SerBarras2


package 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());

}
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=UTF-
8">
</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>

You might also like