Alfonso Blanco Criado

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero Informático *

Creador del blog Rueda Lenticular

Charla sobre Pluto

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2007-05-17

Tutorial visitado 239.057 veces Descargar en PDF
Gráficos con iReport

Gráficos con iReport

Introducción

iReport es una herramienta gratuita (http://jasperforge.org/sf/projects/ireport) escrita en Java que nos permite diseñar informes (jrxml) para posteriormente poder usuarlos con JasperReport.
Actualmente existe en adictosaltrabajo.com un tutorial donde se habla de iReport, su instalación, su configuración y sus funcionalidades básicas para crear informes sencillos (http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=ireport).
Pero iReport no se queda ahí, sino que nos ofrece otras muchas más posibilidades y funcionalidades para la creación de informes como pueden ser, objetos gráficos (rectángulos, líneas, elipses, etc.) subinformes, gráficas, etc...
En este tutorial nos vamos a centrar en explicar paso a paso como crear gráficos con iReport.

Entorno de trabajo

  • iReport 1.2.7
  • Jdk 1.6.0
  • Sistema operativo Windows XP Home Edition
  • Crear un informe

    El primer paso es crear un nuevo informe. Fichero -> Nuevo documento. Existe también un wizard ("Mago de informes") para la creación automática de informes.

    Una vez creado nuestro informe le vamos dando la apariencia que deseemos. Aquí dejo los ficheros usados en este tutorial, backup de la base de datos utilizada para este ejemplo (Tutorial-Graficos-iReport.sql) y el informe de ejemplo (tutorial.jrxml).

    Ahora pulsamos en el botón de Chart Tool, y a continuación seleccionamos el área dentro de nuestro informes (summary band por ejemplo) donde vamos a insertar nuestra gráfica.



    Una vez hecho esto nos saltará una ventana donde elegiremos el tipo de gráfica que queremos insertar en el informe. 

    Básicamente existen dos tipos de gráficas. Las gráficas de tipo "queso" en las que se comparan los valores de cada elemento de una misma y única serie (pie y pie 3D) y el resto de gráficas en las que podemos comparar los valores de cada elemento para varias series de valores (barras, barras 3D, lineal, área, etc..).

    A continuación vamos a ver y explicar dos ejemplos de gráficas de los diferentes tipos de gráficas. Vamos a empezar por el ejemplo de gráfica de "queso"

    Ejemplo 1: gráfica de "queso"

    Una vez seleccionado el tipo de gráfico de queso (Pie o Pie 3D) vamos a configurarla...
    Sobre el área seleccionada para la gráfica pulsamos el botón derecho de nuestro ratón y hacemos click en Chart Properties


    Una vez que estamos en la ventana de edición de nuestra gráfica vemos que tenemos dos pestañas: Chart Properties (relativa el aspecto de nuestra gráfica) y Chart Data (relativa a los valores y datos).
    En la pestaña Chart Properties podemos configurar el título, subtítulo, fuentes, colores, leyendas, y muchas otras cosas más de manera muy intuitiva y sencilla.


    En la pestaña Chart Data nos encontramos con otras dos nuevas pestañas. Pulsamos en Details.
    Aquí es donde debemos configurar que datos van a ser representados en nuestra gráfica. En la sección Key Expression debemos insertar el campo identificativo de cada una de las tuplas generadas por nuestra consulta. En nuestro ejemplo será el campo nombre $F{nombre}. En la sección Value Expression vamos a introducir el campo que contenga los datos a representar en nuestra gráfica, en el ejemplo será el campo valor $F{valor}. Como se puede ver vamos a representar los valores de la columna "valor1", si queremos representar también los valores de "valor2" tendremos que utilizar otra gráfica distinta. Por último tenemos una sección opcional Label Expression donde podremos insertar una expresión, que es la que aparecerá en las etiquetas al lado de cada porción del "queso" en el ejemplo será $F{nombre} + " - " + $F{valor}. Si no ponemos nada por defecto aparecerá $F{nombre} + " = " + $F{valor}


    Ahora ya tenemos configurada nuestra gráfica y sólo nos quedará ejecutar el informe y ver el resultado.

    Ejemplo 2: gráfica de barras 3D

    Se ha elegido este tipo de gráfica para el tutorial como representación de las restantes tipos de gráficas, ya que su configuración es muy similar al resto. Una vez seleccionado el tipo de gráfica barras 3D vamos a configurarla...
    En la pestaña Chart Properties vemos que comparte muchas de las características comunes a la gráfica de "queso". Además hay un apartado nuevo de Bar3D donde podremos configurar algunas características específicas de este tipo de gráfica. Con la opcion Show Label activada veremos en cada barra 3D el valor asociada a ella. Podemos también configurar el grado de desplazamiento de las barras, es decir, la sensacion de 3D con las opciones X e Y offset. Además podemos cambiar la apariencia de nuestra gráfica cambiando los colores, fuentes y tamaños de texto, barras, ejes y demás componentes. Una vez cambiada la apariencia de nuestra gráfica vamos a configurar sus datos. Como en la gráfica de "queso", nos vamos a la pestaña Chart Data, una vez allí nos movemos a la pestaña de Detail.


    A diferencia del tipo de gráfica anterior aquí aparecerán todas las series de números (valores) establecidos que comprondran nuestra gráfica. Para añadir una nueva serie de valores sólo tenemos que pulsar el boton Add.

    Una vez aquí tenemos que configurar los datos de la serie en cuestión. En nuestro ejemplo queremos que nuestra primera serie se llame Serie 1, como categoría tenga el campo nombre $F{nombre} y como valor el campo valor $F{valor}.


    Hacemos lo mismo para la segunda serie...pero ahora lo configuramos para que el valor sea el del campo max $F{max} y el nombre sea Serie 2.



    Al acabar, tendremos un resultado como este.



    Ahora sólo nos queda ejecutar nuestro informe y ver como nos ha quedado la gráfica.



    Estas configuraciones de series se hacen igual para los restantes tipos de gráficas, por lo que ya podéis crear todo tipo de gráficas sin complicación. Sólo tendréis que cambiar aquellos aspectos de aperiencia característicos de cada tipo de gráfica.

    Conclusión

    Como veis, la creación de gráficas con iReport no es particularmente complicado. Nosotros, los miembros de Autentia, intentamos acercaros ese conocimiento a través de nuestros tutoriales y ejemplos prácticos. Pero si la solución a vuestros problemas no se encuentra en www.AdictosAlTrabajo.com, ya sabéis que podéis poneros en contacto con nosotros para que os asesoremos y formemos.

    A continuación puedes evaluarlo:

    Regístrate para evaluarlo

    Por favor, vota +1 o compártelo si te pareció interesante

    Share |
    Anímate y coméntanos lo que pienses sobre este TUTORIAL:

    Fecha publicación: 2014-07-14-23:54:19

    Autor: epavezllanca

    disculpa como puedo hacer un reporte con gráficos en java mas específicamente en netbeans des de mysql.

    Fecha publicación: 2013-10-15-01:54:56

    Autor: pirata

    como puedo hacer que en el grafico de barras me aparezcan por encima de cada barra el valor que le corresponde?

    Fecha publicación: 2013-10-15-01:53:30

    Autor: pirata

    Donde estan las respuestas a las preguntas?

    Fecha publicación: 2011-09-02-20:44:00

    Autor: gaga07

    Me fue de gran ayuda este tutorial, pero me gustaria saber como puedo hacer que en el grafico de barras me aparezcan por encima de cada barra el valor que le corresponde??, ya probe poner en el Label expression $FNombre + "=" + $Fvalor pero no me aparece...en el grafico de "queso" si pero en el de barras no..

    desde ya gracias :) espero alguna ayÜdita

    Fecha publicación: 2011-04-25-22:21:44

    Autor: IngJohnny

    Excelente la información, pero me ha surgido un problema cuando genero una grafica de tipo xy, realizo bien el query a la bd, y me grafica todos los puntos, en la prueba el query me retorna 3 puntos en 'X' y 3 puntos en 'Y'... lo grafica perfectamente, pero me repite la grafica en 3 paginas más, no es por espacion ni mucho menos porque tiene suficiente espacio, no se si es porque el query me retorna los 2 campos con 3 registros cada uno, y es como si el ireports interpretara eso como 3 graficas diferentes...
    agradeceria mucho su oportuna colaborción.

    Fecha publicación: 2011-04-05-16:42:25

    Autor: durkis

    Muy buena la información, pero me surge una duda, ¿Como puedo hacer para que en vez de que aparezca el valor aparezca en porcentajes, es decir juan 40% alberto 60%?

    Fecha publicación: 2010-01-05-00:11:56

    Autor: aktheus

    Muchas gracias por la información, me ha sido bastante útil, pero tengo un problema y es que requiero mostrar un diagrama de linea con información por fechas pero son muchos registros, no se como limitar el número de registros que me muestre por página (gráfico) ya que en la que tengo en el momento no se diferencia un punto del siguiente ni se pueden leer la etiquetas de las fechas. Muchas gracias por su atención y quedo atento a su respuesta.

    Fecha publicación: 2009-10-26-14:34:11

    Autor: d_herrer

    Buenos días, tengo un problema ya que sigo tu manual al pie de la letra(incluso me he descargado vuestro informe, tabla y datos) y no hay manera de que se muestre la gráfica, los datos de la consulta de BD si que los muestra ya que introduzco estos en sección de detail pero, la gráfica que está en la sección summary no muestra nada mas que el título que le asigno a la gráfica. La libreria JFreeChart es la 1.0.0 y es la misma que viene con iReport, he probado también con la 1.0.13. La jdk que utilizo es 1.4 por requerimientos de trabajo. No se que está pasando, si me podeis ayudar por favor....

    Fecha publicación: 2009-09-01-09:32:32

    Autor:

    [Emilio] ¿y si lo que quiero es graficar los valores posibles para Alberto?

    Fecha publicación: 2009-08-25-06:01:55

    Autor:

    [Rigoberto] Hola tengo un problema ke no logro resolver, al hacer un reporte con gráficas me marca error en una libreria ke no existe, existe pero en otro paquete, pero no la detecta con esa que puedo hacer?? el reporte en el preview del plug in si lo puedo ver, pero al estar ejecutando no lo carga y me marca lo siguiente: Exception in thread "AWT-EventQueue-0" java.lang.NoClassDefFoundError: org/jfree/chart/plot/dial/DialFrame at net.sf.jasperreports.charts.util.ChartUtil.getChartTheme(ChartUtil.java:156) at net.sf.jasperreports.engine.fill.JRFillChart.evaluateChart(JRFillChart.java:1277) at net.sf.jasperreports.engine.fill.JRFillChart.evaluateRenderer(JRFillChart.java:1252) at net.sf.jasperreports.engine.fill.JRFillChart.evaluate(JRFillChart.java:1241) at net.sf.jasperreports.engine.fill.JRFillElementContainer.evaluate(JRFillElementContainer.java:260) at net.sf.jasperreports.engine.fill.JRFillBand.evaluate(JRFillBand.java:486) at net.sf.jasperreports.engine.fill.JRVerticalFiller.fillSummarySamePage(JRVerticalFiller.java:968) at net.sf.jasperreports.engine.fill.JRVerticalFiller.fillSummary(JRVerticalFiller.java:902) at net.sf.jasperreports.engine.fill.JRVerticalFiller.fillReportEnd(JRVerticalFiller.java:287) at net.sf.jasperreports.engine.fill.JRVerticalFiller.fillReport(JRVerticalFiller.java:121) at net.sf.jasperreports.engine.fill.JRBaseFiller.fill(JRBaseFiller.java:911) at net.sf.jasperreports.engine.fill.JRBaseFiller.fill(JRBaseFiller.java:814) at net.sf.jasperreports.engine.fill.JRFiller.fillReport(JRFiller.java:63) at net.sf.jasperreports.engine.JasperFillManager.fillReport(JasperFillManager.java:421)

    Fecha publicación: 2009-08-06-09:08:23

    Autor:

    [Naty] Buenas!! Necesito saber porqué, cuando genero un reporte con gráficos muy parecido al del tutorial, lo quiero exportar a xls no me muestra el gráfico?? Alguna Idea?? Gracias.

    Fecha publicación: 2009-07-30-07:56:31

    Autor:

    [Natalia ] Buenas espero ke me aclares unas dudas.. Tengo un problema con un reporte el cual tiene tres graficos, dado ke desde la aplicacion el usuario debe seleccionar si desea ver uno solo o dos o los tres. Cuando pongo los subreportes en cascada, estos aparecen bien si deben aparecer todos. pero de lo contrario aparecen paginas en blanco. Y cuando pongo todos los subreportes en el padre estos aparcen unos encima de otros.

    Fecha publicación: 2009-07-10-07:49:15

    Autor:

    [Quim] Gran tutorial. Eso de ir paso a paso ayuda mucho ;) Muchas gracias.

    Fecha publicación: 2008-12-19-03:03:41

    Autor:

    [Alfonso] Muy practico... execelente