Curso de Graficos Con Java PDF

Versin 1.
Docente: Cdric Simon
SolucionJava.com
Manual del alumno
Ing. Cedric Simon Tel: 2268 0974 Cel: 8888 2387 Email: c e d r i c @ s o l u c i o n j a v a . c o m Web: www.solucionjava.com
Curso de
grficos con Java
y OpenFlashChart
para aplicaciones web
Curso de grficos con Java para aplicaciones web
Pagina 2 / 16
ndice de contenido
1.Introduccin al curso..........................................................................................................................3
1.1.Objetivo de este curso................................................................................................................3
1.2.Manual del alumno.....................................................................................................................3
1.3.Ejercicios prcticos.....................................................................................................................3
1.4.Requisitos para atender a este curso.........................................................................................3
1.5.Soporte despus del curso.........................................................................................................3
2.Introduccin.......................................................................................................................................4
2.1.Grficos con OpenFlashChart....................................................................................................4
2.2.Grficos con Java.......................................................................................................................4
3.OpenFlashChart................................................................................................................................5
3.1.Instalacin..................................................................................................................................5
3.2.Primer grfico.............................................................................................................................5
3.3.Otros grficos.............................................................................................................................6
4.JFreeChart.........................................................................................................................................7
4.1.Instalacin..................................................................................................................................7
4.2.Primer grfico.............................................................................................................................7
4.3.Tipos de grficos y tipos de arreglos de datos...........................................................................8
a)Pie chart........................................................................................................................................8
b)Bar chart.......................................................................................................................................9
c)Line chart.....................................................................................................................................11
d)TimeSerie chart...........................................................................................................................12
e)Otros grficos..............................................................................................................................13
4.4.Conexin con la base de datos................................................................................................13
4.5.Formateo fino del grfico..........................................................................................................15
Copyright Cdric Simon, 2005-2009
Versin 1.0
Pagina 2 / 16
Pagina 3 / 16
1. Introduccin al curso
1.1.
Objetivo de este curso
En este curso vamos a aprender a crear grficos para aplicaciones web JSP.
1.2.
Manual del alumno
Este manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manual
contiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debera
de tomar notas personales para completas este manual.
1.3.
Ejercicios prcticos
Para captar mejor la teora, se harn muchos ejercicios con los alumnos, para probar la teora y
verificar la integracin de la materia.
Tambin, el alumno podr copiar sus cdigos en una memoria flash al fin del curso para llevarse, con
fin de seguir la prctica en su hogar.
1.4.
Requisitos para atender a este curso
El conocimiento de los lenguaje HTML, Java, y Javascript es requerido para poder atender a este
curso.
Si el alumno tiene dificultades en un u otro capitulo, el debe sentirse libre de pedir explicaciones
adicionales al profesor.
Pero si aparece que el alumno no posee los requisitos mnimos para este curso, por respeto a los
otros alumnos que ya poseen esta materia, el alumno podra ser traslado para otro curso en el futuro,
cuando el cumplir con los requisitos.
1.5.
Soporte despus del curso
Si tienes preguntas sobre la materia del curso en tus ejercicios prcticos, puedes escribir tus
preguntas a cedric@solucionjava.com .
Para informaciones sobre otros cursos, visita el sitio web www.solucionjava.com.
Versin 1.0
Pagina 3 / 16
Pagina 4 / 16
2. Introduccin
2.1.
Grficos con OpenFlashChart
OpenFlashChart es una librera Flash que permite crear grficos en Flash usando Javascript para
manejar el grficos, y entonces sin escribir nada en Flash.
OpenFlashCart permite crear grficos ms atractivos que JFreeChart, pero tiene menos tipos de
grficos disponibles, y no es un objeto Java, si no que se ha creado una accin personalizada para
poder crear fcilmente los grficos desde una pgina JSP. OpenFlashChart solo est disponible para
clientes web.
2.2.
Grficos con Java
Existen varios paquetes que permiten crear grficos con Java. La ms conocida, y probablemente la
ms completa es el paquete JFreeChart, que se puede usar solo o empaquetado en otros paquetes
como JasperReport.
JFreeChart es un software libre, bajo licencia GPL, y se puede descargar desde
http://www.jfree.org/jfreechart/ .
JFreeChart permite crear todos tipos de grficos, ya sea rea, barra, ejes,lineales, linea de tiempo,
etc...
Las clases de JFreeChart crean objetos Graphic2D que se pueden en aplicaciones de escritorio, o
exportar a imgenes o PDF para incluirlos en aplicaciones web, sin necesidad de plugin especial.
Versin 1.0
Pagina 4 / 16
Pagina 5 / 16
3. OpenFlashChart
3.1.
Instalacin
Para poder usar JFreeChart necesitamos :

1. El archivo SjFramework.jar
2. Una subcarpeta llamada 'chart' debajo de 'WebContent' (o raiz del sitio) con los archivos openflash-chart.swf y swfobject.js, y opcionalmente el archivo flash_detect.js
3. Un navegador con el plugin de Macromedia Flash instalado para poder ver los grficos
4. La base de datos disponible como fuente de datos.
OpenFlashChart no necesita Java para funcionar. Pero vamos a ver en este curso como usar la
librera de accin personalizada TagLib diseada por SolucionJava.com y liberada bajo licencia GPL,
que nos permite crear grficos basados en una consulta a una base de datos.
3.2.
Primer grfico
Para crear grficos en OpenFlashChart con la librera de SolucionJava.com, es muy fcil: usa el
taglib, menciona los parmetros que quieres para personalizar el grfico, y pone el SQL para traer los
datos.
Se guardo el nombre de variable original de OpenFlashChart (que no respeta las reglas de
nombramiento de Java) para poder fcilmente ligar el Java con el Javascript.
Para info sobre los parmetros disponibles, ver la documentacin del API de OpenFlashChartTag, y
para su significado, ver la documentacin en el el sitio web oficial de OpenFlashChart
(http://teethgrinder.co.uk/open-flash-chart/).
Ejemplo:
<%@tagliburi="/WEBINF/lib/SjFramework.jar"prefix="sj"%>
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Primergráfico</title>
<scripttype="text/javascript"src="chart/swfobject.js"></script>
</head>
<body>
<scripttype="text/javascript"src="chart/flash_detect.js"></script>
<h1>Primergráfico</h1>
<sj:OpenFlashChart
width="400"
height="200"
title="SimpleLinechartexample"
title_style="fontsize:26px"
occurence="1"
line_hollow_colour="#bdf"
line_hollow_dot_size="5"
line_hollow_text="Matagalpa"
line_hollow_font_size="12"
line_hollow_width="2"
dbObjectName="bd.LeerDB"
>
selecttm.value_es,
total_ventas,
date_format(fecha,'%m')
Versin 1.0
Pagina 5 / 16
Pagina 6 / 16
from
ventastt
joinmonthstmon(date_format(fecha,'%m')=tm.orden)
wherett.fechabetween'20070101'and'20070630'
andno_site=4
orderby3
</sj:OpenFlashChart>
</body>
</html>
3.3.
Otros grficos
Para obtener otros grfico, solo modifica los parametros de la etiqueta <sj:OpenFlashChart>.
Cuando hay varios grupos de valores, se menciona el nmero de grupos de datos con el parmetro
numberOfDataSets, y el valor del identificador de cada grupo (cuarto campo de la consulta) con
setXValue donde X representa el numero del grupo. Luego define el color y el texto de cada grupo.
Ejemplo:
<%@tagliburi="/WEBINF/lib/SjFramework.jar"prefix="sj"%>
<html>
<head>
<title>Gráficodevariosgruposdedatos</title>
<scripttype="text/javascript"src="chart/swfobject.js"></script>
</head>
<body>
<scripttype="text/javascript"src="chart/flash_detect.js"></script>
<h1>Gráficodevariosgruposdedatos</h1>
<sj:OpenFlashChart
width="400"
height="200"
title="Multiplelineschartexample"
title_style="fontsize:26px"
numberOfDataSets="4"
set1Value="1" set2Value="2" set3Value="3" set4Value="4"
occurence="3" line_hollow_colour="#3333ad" line_hollow_dot_size="5"
line_hollow_font_size="12"
line_hollow_width="2"
line_circles="15"
line_size="12" line_width="2" line2_colour="#af2566"
line_dot_dot_size="5" line_dot_font_size="12"
line3_dot_text="Masaya"
line4_hollow_colour="#bdf"
line_dot_width="2"
line_hollow_text="Managua"
line2_text="Leon"
line3_dot_colour="#777777"
line4_hollow_text="Matagalpa"
dbObjectName="bd.LeerDB"
>
selecttm.value_es,
total_ventas,
date_format(fecha,'%m'),
no_site
fromventastt
joinmonthstmon(date_format(fecha,'%m')=tm.orden)
wherett.fechabetween'20070101'and'20070630'
orderby3,4
</sj:OpenFlashChart>
</body>
</html>
Versin 1.0
Pagina 6 / 16
Pagina 7 / 16
4. JFreeChart
4.1.
Instalacin
Para poder usar JFreeChart necesitamos las libreras jfreechart-1.0.13.jar, jcommon-1.0.16.jar, y

iText-2.1.5.jar incluidas en el classpath (les podemos copiar debajo WEB-INF/lib).
4.2.
Primer grfico
Vamos a crear un primer grfico en un servlet, y una pgina HTML para mostrarlo.
Primero tenemos que crear el arreglo de valores (dataset), luego creamos el grfico, y lo enviamos
por la salida.
Ejemplo:
packagedemo;
importjava.io.IOException;
importjava.io.OutputStream;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importorg.jfree.chart.ChartFactory;
importorg.jfree.chart.ChartUtilities;
importorg.jfree.chart.JFreeChart;
importorg.jfree.chart.plot.PlotOrientation;
importorg.jfree.data.category.DefaultCategoryDataset;
publicclassServletDemo1extendsHttpServlet{
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
OutputStreamout=response.getOutputStream();
try{
DefaultCategoryDatasetdataset=newDefaultCategoryDataset();
dataset.addValue(10.0,"S1","C1");
dataset.addValue(null,"S6","C3");
Versin 1.0
Pagina 7 / 16
Pagina 8 / 16
JFreeChartchart=ChartFactory.createBarChart(
"BarChart",
"Category",
"Value",
dataset,
PlotOrientation.VERTICAL,
true,true,false
);
response.setContentType("image/png");
ChartUtilities.writeChartAsPNG(out,chart,400,300);
}
catch(Exceptione){
System.err.println(e.toString());
}
finally{out.close();
}
}
}
jfdemo1.jsp:
<%@pagelanguage="java"contentType="text/html;charset=ISO88591"
pageEncoding="ISO88591"%>
<html>
<head>
<metahttpequiv="ContentType"content="text/html;charset=ISO88591">
<title>PrimergraficoJFreeChart</title>
</head>
<body>
<h1>PrimergraficoJFreeChart</h1>
<hr>
<imgalt="PrimergraficoJFreeChart"src="ServletDemo1">
</body>
</html>
4.3.
Tipos de grficos y tipos de arreglos de datos
A cada tipo de grfico corresponde un tipo de arreglo de datos.

Los principales tipos de grficos son: Pie, Bar, Line, y TimeSerie.
a)
Pie chart
Crear un arreglo de datos de tipo PieDataset y luego crear el grfico.

Servlet PieDemo1:
packagedemo;
Versin 1.0
Pagina 8 / 16
Pagina 9 / 16
importorg.jfree.data.general.DefaultPieDataset;
publicclassPieDemo1extendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,
IOException{
doPost(request,response);
}
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throws
ServletException,IOException{
try{
JFreeChartchart=null;
chart=createPieChart();
if(chart!=null){
}
}
catch(Exceptione){
}
}
}
privateJFreeChartcreatePieChart(){
DefaultPieDatasetdata=newDefaultPieDataset();
data.setValue("Uno",newDouble(43.2));
data.setValue("Dos",newDouble(10.0));
data.setValue("Tres",newDouble(27.5));
data.setValue("Cuatro",newDouble(17.5));
data.setValue("Cinco",newDouble(11.0));
data.setValue("Seis",newDouble(19.4));
JFreeChartchart=ChartFactory.createPieChart(
"PieChartDemo1",//charttitle
data,//data
true,//includelegend
true,//tooltips
false//urls
);
returnchart;
}
}
b)
Bar chart
Crear un arreglo de datos de tipo DefaultCategoryDataset y luego crear el grfico.

Servlet BarDemo1:
packagedemo;
Versin 1.0
Pagina 9 / 16
Pagina 10 / 16
publicclassBarDemo1extendsHttpServlet{
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throws
}
try{
chart=createBarChart();
if(chart!=null){
}
}
catch(Exceptione){
}
}
}
privateJFreeChartcreateBarChart(){
dataset.addValue(null,"S6","C3");
Versin 1.0
Pagina 10 / 16
Pagina 11 / 16
JFreeChartchart=ChartFactory.createBarChart3D(
"BarChartDemo1",//charttitle
"Category",//domainaxislabel
"Value",//rangeaxislabel
dataset,//data
PlotOrientation.VERTICAL,//orientation
true,//tooltips?
false//URLs?
);
returnchart;
}
}
c)
Line chart
Crear un arreglo de datos de tipo DefaultCategoryDataset y luego crear el grfico.

Servlet LineDemo1:
packagedemo;
publicclassLineDemo1extendsHttpServlet{
}
try{
chart=createLineChart();
if(chart!=null){
}
}
catch(Exceptione){
}
}
}
privateJFreeChartcreateLineChart(){
dataset.addValue(212,"Classes","JDK1.0");
Versin 1.0
Pagina 11 / 16
Pagina 12 / 16
JFreeChartchart=ChartFactory.createLineChart(
"JavaStandardClassLibrary",//charttitle
null,//domainaxislabel
"ClassCount",//rangeaxislabel
dataset,//data
false,//includelegend
true,//tooltips
false//urls
);
returnchart;
}
}
d)
TimeSerie chart
Crear un arreglo de datos de tipo XYDataset y luego crear el grfico.

Servlet TimeSerieDemo1:
packagedemo;
importorg.jfree.data.time.Day;
importorg.jfree.data.time.TimeSeries;
importorg.jfree.data.time.TimeSeriesCollection;
importorg.jfree.data.xy.XYDataset;
importorg.jfree.date.MonthConstants;
publicclassTimeSerieDemo1extendsHttpServlet{
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,
IOException{
}
try{
chart=createTimeSeriesChart();
if(chart!=null){
}
}
catch(Exceptione){
}
}
}
Versin 1.0
Pagina 12 / 16
Pagina 13 / 16
privateJFreeChartcreateTimeSeriesChart(){
//herewejustpopulateaserieswithrandomdata...
TimeSeriesseries=newTimeSeries("RandomData");
Daycurrent=newDay(1,MonthConstants.JANUARY,2009);
for(inti=0;i<100;i++){
series.add(current,Math.random()*100);
current=(Day)current.next();
}
XYDatasetdata=newTimeSeriesCollection(series);
JFreeChartchart=ChartFactory.createTimeSeriesChart(
"TimeSeriesChart",//title
"Date",//xaxislabel
"Rate",
//yaxislabel
data,//data
true,//createlegend?
true,//generatetooltips?
false//generateURLs?
);
returnchart;
}
}
e)
Otros grficos
Como pudieron ver, es siempre casi el mismo cdigo:

1) crear un arreglo de datos
2) crear el grfico
Para los otros tipos de grficos, ver la documentacin API de JfreeChart.
4.4.
Conexin con la base de datos
Para traer los datos de la base de datos, hay dos posibilidades: llenar el arreglo de datos con una
bucle sobre el arreglo de resultados, o usar un arreglo de datos JDBC.
Cada arreglo de datos tiene su pendiente JDBC.
PieDataset JDBCPieDataset
XYDataset JDBCXYDataset
DefaultDataset JDBCDefaultDataset
etc...
El uso del JDBC dataset es muy sencillo: crear una conexin, pasarla al dataset, ejecutar la consulta,
y cerrar la conexin.
con=DriverManager.getConnection(url,"jfreechart","password");
data=newJDBCPieDataset(con);
Stringsql="SELECT*FROMPIEDATA1;";
data.executeQuery(sql);
con.close();
Si usamos el marco de tarbajo de SolJava:

LeerDBleerDB=newLeerDB();
data=newJDBCPieDataset(leerDB.getCon());
Versin 1.0
Pagina 13 / 16
Pagina 14 / 16
Stringsql="SELECT*FROMPIEDATA1;";
leerDB.cleanup();
Servlet PieDemo2:
packagedemo;
importjava.sql.SQLException;
importorg.jfree.data.jdbc.JDBCPieDataset;
importbd.LeerDB;
publicclassPieDemo2extendsHttpServlet{
}
try{
chart=createPieChart();
if(chart!=null){
}
}
catch(Exceptione){
}
}
}
privateJFreeChartcreatePieChart(){
JDBCPieDatasetdata=null;
try{
data=newJDBCPieDataset(leerDB.getCon());
Stringsql="select"+
"tm.value_es,"+
"total_ventas"+
"from"+
"ventastt"+
"joinmonthstmon(date_format(fecha,'%m')=tm.orden)"+
"wherett.fechabetween'20070101'and'20070630'"+
"andno_site=4";
leerDB.cleanup();
}catch(SQLExceptione){
e.printStackTrace();
}catch(Exceptione){
e.printStackTrace();
}
JFreeChartchart=ChartFactory.createPieChart(
Versin 1.0
Pagina 14 / 16
Pagina 15 / 16
"PieChartDemo1",//charttitle
data,//data
true,//tooltips
false//urls
);
returnchart;
}
}
4.5.
Formateo fino del grfico
Los grficos de JfreeChart se pueden formatear de manera muy fina.

Casi todos los elementos del grfico se pueden personalizar, ya sea el ttulo, los ejes, el fondo, las
etiquetas, etc...
Existen hasta la posibilidad de crear grficos interactivos.
Como las opciones de formateo fino son inmensas, referirse a la documentacin en lnea para
descubrir todas las posibilidades.
Servlet BarDemo2:
packagedemo;
importjava.awt.BasicStroke;
importjava.awt.Color;
importjava.awt.GradientPaint;
importjava.sql.SQLException;
importorg.jfree.chart.axis.NumberAxis;
importorg.jfree.chart.plot.CategoryPlot;
importorg.jfree.chart.title.TextTitle;
importorg.jfree.data.jdbc.JDBCCategoryDataset;
importorg.jfree.ui.RectangleInsets;
importbd.LeerDB;
publicclassBarDemo2extendsHttpServlet{
}
try{
chart=createBarChart();
if(chart!=null){
}
}
catch(Exceptione){
Versin 1.0
Pagina 15 / 16
Pagina 16 / 16
}
}
}
privateJFreeChartcreateBarChart(){
JDBCCategoryDatasetdata=null;
try{
data=newJDBCCategoryDataset(leerDB.getCon());
Stringsql="select"+"tm.value_es,"+"total_ventas"+
"from"+"ventastt"+
"joinmonthstmon(date_format(fecha,'%m')=tm.orden)"+
"wherett.fechabetween'20070101'and'20070630'"+
"andno_site=4";
leerDB.cleanup();
}catch(SQLExceptione){e.printStackTrace();
}catch(Exceptione){e.printStackTrace();}
JFreeChartchart=ChartFactory.createBarChart(
"BarChartDemo2",//charttitle
null,//domainaxislabel
"Valor",//rangeaxislabel
data,//data
true,//tooltips?
false//URLs?
);
TextTitletitle=chart.getTitle();
title.setBorder(0,0,1,0);
title.setBackgroundPaint(newGradientPaint(0f,0f,Color.red,350f,
0f,Color.white,true));
title.setExpandToFitSpace(true);
chart.setBackgroundPaint(newGradientPaint(0f,0f,Color.yellow,350f,
0f,Color.white,true));
//getareferencetotheplotforfurthercustomisation...
CategoryPlotplot=(CategoryPlot)chart.getPlot();
plot.setNoDataMessage("NODATA!");
plot.setBackgroundPaint(null);
plot.setInsets(newRectangleInsets(10,5,5,5));
plot.setOutlinePaint(Color.black);
plot.setRangeGridlinePaint(Color.gray);
plot.setRangeGridlineStroke(newBasicStroke(1.0f));
//changethemarginatthetopoftherangeaxis...
NumberAxisrangeAxis=(NumberAxis)plot.getRangeAxis();
rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
rangeAxis.setRange(0.0,30.0);
rangeAxis.setTickMarkPaint(Color.black);
returnchart;
}
}
Versin 1.0
Pagina 16 / 16

Curso de Graficos Con Java PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Graficos Con Java PDF

Cargado por

Copyright:

Formatos disponibles

Versin 1.

Docente: Cdric Simon

Manual del alumno

Curso de grficos con Java para aplicaciones web

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Objetivo de este curso

Manual del alumno

Requisitos para atender a este curso

Soporte despus del curso

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Grficos con OpenFlashChart

Grficos con Java

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Para poder usar JFreeChart necesitamos :

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

line_size="12" line_width="2" line2_colour="#af2566"

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Para poder usar JFreeChart necesitamos las libreras jfreechart-1.0.13.jar, jcommon-1.0.16.jar, y

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Tipos de grficos y tipos de arreglos de datos

A cada tipo de grfico corresponde un tipo de arreglo de datos.

Crear un arreglo de datos de tipo PieDataset y luego crear el grfico.

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Crear un arreglo de datos de tipo DefaultCategoryDataset y luego crear el grfico.

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Crear un arreglo de datos de tipo DefaultCategoryDataset y luego crear el grfico.

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Crear un arreglo de datos de tipo XYDataset y luego crear el grfico.

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Como pudieron ver, es siempre casi el mismo cdigo:

Conexin con la base de datos

Si usamos el marco de tarbajo de SolJava:

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Formateo fino del grfico

Los grficos de JfreeChart se pueden formatear de manera muy fina.

Copyright Cdric Simon, 2005-2009

Curso de grficos con Java para aplicaciones web

Copyright Cdric Simon, 2005-2009

También podría gustarte