Curso de Graficos Con Java

SolucionJava.com

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 Manual del alumno

Docente: Cdric Simon

Versin 1.0

Curso de grficos con Java para aplicaciones web

Pagina 2 / 16

ndice de contenido1.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 curso1.1. 1.2. Objetivo de este curso Manual del alumnoEn este curso vamos a aprender a crear grficos para aplicaciones web JSP.

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 [email protected] . Para informaciones sobre otros cursos, visita el sitio web www.solucionjava.com.


Versin 1.0

Pagina 3 / 16


Pagina 4 / 16

2. Introduccin2.1. Grficos con OpenFlashChartOpenFlashChart 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. OpenFlashChart3.1. InstalacinPara 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: Primergrfico Primergrfico selecttm.value_es, total_ventas, date_format(fecha,'%m')


Versin 1.0

Pagina 5 / 16

Curso de grficos con Java para aplicaciones webfrom ventastt joinmonthstmon(date_format(fecha,'%m')=tm.orden) wherett.fechabetween'20070101'and'20070630' andno_site=4 orderby3

Pagina 6 / 16

3.3.

Otros grficos

Para obtener otros grfico, solo modifica los parametros de la etiqueta . 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: Grficodevariosgruposdedatos Grficodevariosgruposdedatos 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


Versin 1.0

Pagina 6 / 16


Pagina 7 / 16

4. JFreeChart4.1. InstalacinPara 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(4.0,"S1","C2"); dataset.addValue(15.0,"S1","C3"); dataset.addValue(14.0,"S1","C4"); dataset.addValue(5.0,"S2","C1"); dataset.addValue(7.0,"S2","C2"); dataset.addValue(14.0,"S2","C3"); dataset.addValue(3.0,"S2","C4"); dataset.addValue(6.0,"S3","C1"); dataset.addValue(17.0,"S3","C2"); dataset.addValue(12.0,"S3","C3"); dataset.addValue(7.0,"S3","C4"); dataset.addValue(7.0,"S4","C1"); dataset.addValue(15.0,"S4","C2"); dataset.addValue(11.0,"S4","C3"); dataset.addValue(0.0,"S4","C4"); dataset.addValue(8.0,"S5","C1"); dataset.addValue(6.0,"S5","C2"); dataset.addValue(10.0,"S5","C3"); dataset.addValue(9.0,"S5","C4"); dataset.addValue(9.0,"S6","C1"); dataset.addValue(8.0,"S6","C2"); dataset.addValue(null,"S6","C3"); dataset.addValue(6.0,"S6","C4");


Versin 1.0

Pagina 7 / 16

Curso de grficos con Java para aplicaciones webdataset.addValue(10.0,"S7","C1"); dataset.addValue(9.0,"S7","C2"); dataset.addValue(7.0,"S7","C3"); dataset.addValue(7.0,"S7","C4"); dataset.addValue(11.0,"S8","C1"); dataset.addValue(13.0,"S8","C2"); dataset.addValue(9.0,"S8","C3"); dataset.addValue(9.0,"S8","C4"); dataset.addValue(3.0,"S9","C1"); dataset.addValue(7.0,"S9","C2"); dataset.addValue(11.0,"S9","C3"); dataset.addValue(10.0,"S9","C4"); 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(); } } }

Pagina 8 / 16

jfdemo1.jsp:

PrimergraficoJFreeChart PrimergraficoJFreeChart

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

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.data.general.DefaultPieDataset; publicclassPieDemo1extendsHttpServlet{ privatestaticfinallongserialVersionUID=1L; protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException, IOException{ doPost(request,response); } protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throws ServletException,IOException{ OutputStreamout=response.getOutputStream(); try{ JFreeChartchart=null; chart=createPieChart(); if(chart!=null){ response.setContentType("image/png"); ChartUtilities.writeChartAsPNG(out,chart,400,300); } } catch(Exceptione){ System.err.println(e.toString()); } finally{out.close(); } } 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; importjava.io.IOException; importjava.io.OutputStream;


Versin 1.0

Pagina 9 / 16

Curso de grficos con Java para aplicaciones webimportjavax.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;

Pagina 10 / 16

publicclassBarDemo1extendsHttpServlet{ privatestaticfinallongserialVersionUID=1L; protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throws ServletException,IOException{ doPost(request,response); } protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throws ServletException,IOException{ OutputStreamout=response.getOutputStream(); try{ JFreeChartchart=null; chart=createBarChart(); if(chart!=null){ response.setContentType("image/png"); ChartUtilities.writeChartAsPNG(out,chart,400,300); } } catch(Exceptione){ System.err.println(e.toString()); } finally{out.close(); } } privateJFreeChartcreateBarChart(){ DefaultCategoryDatasetdataset=newDefaultCategoryDataset(); dataset.addValue(10.0,"S1","C1"); dataset.addValue(4.0,"S1","C2"); dataset.addValue(15.0,"S1","C3"); dataset.addValue(14.0,"S1","C4"); dataset.addValue(5.0,"S2","C1"); dataset.addValue(7.0,"S2","C2"); dataset.addValue(14.0,"S2","C3"); dataset.addValue(3.0,"S2","C4"); dataset.addValue(6.0,"S3","C1"); dataset.addValue(17.0,"S3","C2"); dataset.addValue(12.0,"S3","C3"); dataset.addValue(7.0,"S3","C4"); dataset.addValue(7.0,"S4","C1"); dataset.addValue(15.0,"S4","C2"); dataset.addValue(11.0,"S4","C3"); dataset.addValue(0.0,"S4","C4"); dataset.addValue(8.0,"S5","C1"); dataset.addValue(6.0,"S5","C2"); dataset.addValue(10.0,"S5","C3"); dataset.addValue(9.0,"S5","C4"); dataset.addValue(9.0,"S6","C1"); dataset.addValue(8.0,"S6","C2"); dataset.addValue(null,"S6","C3"); dataset.addValue(6.0,"S6","C4"); dataset.addValue(10.0,"S7","C1"); dataset.addValue(9.0,"S7","C2"); dataset.addValue(7.0,"S7","C3"); dataset.addValue(7.0,"S7","C4"); dataset.addValue(11.0,"S8","C1"); dataset.addValue(13.0,"S8","C2");


Versin 1.0

Pagina 10 / 16

Curso de grficos con Java para aplicaciones webdataset.addValue(9.0,"S8","C3"); dataset.addValue(9.0,"S8","C4"); dataset.addValue(3.0,"S9","C1"); dataset.addValue(7.0,"S9","C2"); dataset.addValue(11.0,"S9","C3"); dataset.addValue(10.0,"S9","C4"); JFreeChartchart=ChartFactory.createBarChart3D( "BarChartDemo1",//charttitle "Category",//domainaxislabel "Value",//rangeaxislabel dataset,//data PlotOrientation.VERTICAL,//orientation true,//includelegend true,//tooltips? false//URLs? ); returnchart; } }

Pagina 11 / 16

c)

Line chart

Crear un arreglo de datos de tipo DefaultCategoryDataset y luego crear el grfico. Servlet LineDemo1: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; publicclassLineDemo1extendsHttpServlet{ privatestaticfinallongserialVersionUID=1L; protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throws ServletException,IOException{ doPost(request,response); } protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throws ServletException,IOException{ OutputStreamout=response.getOutputStream(); try{ JFreeChartchart=null; chart=createLineChart(); if(chart!=null){ response.setContentType("image/png"); ChartUtilities.writeChartAsPNG(out,chart,600,300); } } catch(Exceptione){ System.err.println(e.toString()); } finally{out.close(); } } privateJFreeChartcreateLineChart(){ DefaultCategoryDatasetdataset=newDefaultCategoryDataset(); dataset.addValue(212,"Classes","JDK1.0");


Versin 1.0

Pagina 11 / 16

Curso de grficos con Java para aplicaciones webdataset.addValue(504,"Classes","JDK1.1"); dataset.addValue(1520,"Classes","JDK1.2"); dataset.addValue(1842,"Classes","JDK1.3"); dataset.addValue(2991,"Classes","JDK1.4"); dataset.addValue(3500,"Classes","JDK1.5"); JFreeChartchart=ChartFactory.createLineChart( "JavaStandardClassLibrary",//charttitle null,//domainaxislabel "ClassCount",//rangeaxislabel dataset,//data PlotOrientation.VERTICAL,//orientation false,//includelegend true,//tooltips false//urls ); returnchart; } }

Pagina 12 / 16

d)

TimeSerie chart

Crear un arreglo de datos de tipo XYDataset y luego crear el grfico. Servlet TimeSerieDemo1: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.data.time.Day; importorg.jfree.data.time.TimeSeries; importorg.jfree.data.time.TimeSeriesCollection; importorg.jfree.data.xy.XYDataset; importorg.jfree.date.MonthConstants; publicclassTimeSerieDemo1extendsHttpServlet{ privatestaticfinallongserialVersionUID=1L; protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException, IOException{ doPost(request,response); } protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throws ServletException,IOException{ OutputStreamout=response.getOutputStream(); try{ JFreeChartchart=null; chart=createTimeSeriesChart(); if(chart!=null){ response.setContentType("image/png"); ChartUtilities.writeChartAsPNG(out,chart,400,300); } } catch(Exceptione){ System.err.println(e.toString()); } finally{out.close(); } }


Versin 1.0

Pagina 12 / 16

Curso de grficos con Java para aplicaciones webprivateJFreeChartcreateTimeSeriesChart(){ //herewejustpopulateaserieswithrandomdata... TimeSeriesseries=newTimeSeries("RandomData"); Daycurrent=newDay(1,MonthConstants.JANUARY,2009); for(inti=0;i

Curso de Graficos Con Java

Documents

Transcript of Curso de Graficos Con Java