miércoles, 30 de marzo de 2011

jChart, Reportes con JasperRepots y iReports



1.- Introducción a Chart

1.1- ¿Por qué usar Charts y Graphs (cuadros y gráficos)?


Los gráficos y los cuadros son el método más eficiente de mostrar la

información de una manera sencilla. El uso de este tipo de representación ayuda a los

usuarios a comprender e interpretar la información más fácilmente y de manera más

eficiente, lo cual podría ser un proceso difícil y tedioso.

Todas las formas de gráficos y tablas incorporan algunos contenidos visuales en

la representación.


1.2- Diferencia entre Charts y Graphs.


Hay una diferencia muy pequeña entre estos dos términos que son usados para

añadir elementos visuales y espaciales que ayudan a la interpretación y comprensión de

la información.

Los charts se suelen usar datos simples de dos variables, como gráficos de barras o gráficos circulares.

También pueden usarse para hacer referencia a cantidades

que se refieren a mapas complejos de alta densidad.

Los graphs normalmente se refieren a temas matemáticos, por lo que en general

contienen los ejes X, Y o Z. En un graph ningún dato es representado sin usar los

ejes y, a veces, también es dividido en cuadrículas para facilitar la clasificación

de los datos.


1.3- Herramientas en Java de código abierto para chart.


Estas son las herramientas de terceros para los que los códigos fuente están

disponibles bajo un acuerdo de licencia de usuario General. Algunos de ellos son los

siguientes:

JFreeChart: Esta es una biblioteca Java libre para la creación de diferentes

tipos de tablas y gráficos, incluyendo:

Gráficos circulares (2D y 3D).

Gráficos de barras (regular y apilados, con un efecto 3D opcional).

La línea y de áreas.

Gráficos de dispersión y gráficos de burbujas.

Series temporales, alto/ bajo/ abierto/ cerrado cuadro y gráficos de vela palo.

Gráficos de Pareto. (Contiene líneas y barras).

Gráficas de Gantt.

Parcelas viento, tablas y gráficos metros símbolo.

Gráficos mapa de la oblea.

JCharts: es de un 100% de utilidad de gráficos basado en Java que hace salir

una gran variedad de gráficos. Este paquete ha sido diseñado desde cero por

voluntarios para la visualización de gráficos a través de servlets, JSP y

aplicaciones Swing.

JGraphT: es una librería Java de gráficos que proporciona teoría de objetos

matemáticos y la teoría de grafos y algoritmos. JGraphT soporta varios tipos de

gráficos, incluyendo:

Grafos dirigidos y no dirigidos.

Grafos ponderados / no ponderados/ etiquetados o cualquiera definido por el

usuario.

Varias opciones de borde múltiple, incluyendo: gráficos simples,

multigrafos, pseudografos.

Gráficos no modificables: permiten módulos que provean acceso de "sólo

lectura" a los gráficos internos.

Gráfo “escuchable”: permiten a los oyentes externos el seguimiento de los

eventos de modificación.

Subgrafos: gráficos que son auto-actualizados.


1.4- Introducción a jChart.

1.4.1- Descargando jChart.


La manera más sencilla de obtener jChart es visitar la página de descarga http://jcharts.sourceforge.net

/downloads.html y bajar

la versión más actual. En esta página no solo podemos encontrar el núcleo de la de

distribución de jChart, sino que también está la guía de usuario y varios proyectos de

terceros que lo integran.


1.4.2- Contenido del archivo.


Una vez descargado el archivo jCharts-x.x.x.zip, solo tenemos que

descomprimirlo en una carpeta, cuyo contenido será algo como parecido a esto:

jCharts-XXX

+--build

+--demo

+--docs

+--lib

+--src

--jCharts-x.x.x.jar

--jChartsServletExamples.var

El archivo jCharts-x.x.x.jar es la librería núcleo de jChart. Solo basta con añadir

este archivo al classpath para poder disfrutar de toda su funcionalidad.

La carpeta build contiene un fichero Jakarta Ant build, llamado build.xml.

La carpeta demo contiene el código para una aplicación demo en Servlet, así

como un ejemplo con Swing.

La carpeta docs contiene la información de la licencia y un archivo readme.html

con notas de los cambios de la versión.

La carpeta javadocs contiene los archivos javadoc para la librería jCharts.

La carpeta lib contiene librerías de soporte que se necesitan para usar algunas

características de jCharts.

La carpeta src contiene los fuentes de jChart. Después de todo, ¡es código

abierto!


1.5- Exportando imágenes.


jChart exporta a los siguientes formatos: PNG, JPEG, y SVG, a través de los

objetos del codificador en el paquete org.krysalis.jcharts.encoders. Cada uno de estos

codificadores tiene un método para codificar sus gráficos: encode(Chart chart,

OutputStream outputStream). Es una versión genérica, por lo que puedes pasarle

cualquier implementación de OutputStream, como FileOutputStream.

El soporte para JPEG y PNG es aportado por el SDK 1.4. En otras palabras,

necesitas el SDK 1.4 (o superior) para usar los codificadores de imagen.

El soporte para SVG es aportado por el proyecto Apache XML: Batik. Visita

http://xml.apache.org/batik/ para más información.


1.6- Imágenes desde un Servlet.


Hay una clase de ayuda, org.krysalis.jcharts.encoders.ServletEncoderHelper,

añadida para exportar charts desde Servlets y JSPs. Hay métodos en esta clase que

exportan a cualquier formato soportado por jChart, con la ventaja añadida de que

automáticamente configura el tipo MIME de los gráficos para tu navegador, por lo que

el navegador sabrá cómo renderizarlo correctamente.

Advertencia: Algunos usuarios intentan una imagen de un gráfico en disco y luego

devolver el flujo hacia el navegador. No es necesario, puedes simplemente dirigir la

imagen al navegador usando la clase mencionada anteriormente.





1.7- Gráficos en aplicaciones Swing.

También puedes usar jCharts en una aplicación Swing. Aquí dejo el ejemplo

SwingDemo del paquete org.krysalis.jcharts.demo.swing. Aquí, simplemente configura

el objeto Graphics de tu componente swing dentro del chart y llama a render();


import org.jCharts.chartData.ChartDataException;
import org.jCharts.chartData.PieChartDataSet;
import org.jCharts.properties.PropertyException;
import org.jCharts.properties.PieChart2DProperties;
import org.jCharts.properties.ChartProperties;
import org.jCharts.properties.LegendProperties;
import org.jCharts.nonAxisChart.PieChart2D;
import javax.swing.*;
import java.awt.*;
import java.awt.event.WindowEvent;

public class SwingDemo extends JFrame {

private JPanel panel;
private PieChart2DProperties pieChart2DProperties;
private LegendProperties legendProperties;
private ChartProperties chartProperties;

public SwingDemo() throws ChartDataException, PropertyException {
initComponents();
}

private void initComponents() throws ChartDataException, PropertyException {
this.setSize(500, 500);
this.panel = new JPanel(true);
this.panel.setSize(500, 500);
this.getContentPane().add(this.panel);
this.pieChart2DProperties = new PieChart2DProperties();
this.legendProperties = new LegendProperties();
this.chartProperties = new ChartProperties();
this.setVisible(true);
addWindowListener(new java.awt.event.WindowAdapter() {

public void windowClosing(WindowEvent windowEvent) {
exitForm(windowEvent);
}
});
}

/***************************************************************
*
* @param graphics
**************************************************************/
public void paint(Graphics graphics) {
try {
String[] labels = {"BMW", "Audi", "Lexus"};
String title = "Cars that Own";
Paint[] paints = {Color.blue, Color.gray, Color.red};
double[] data = {50d, 30d, 20d};
PieChartDataSet pieChartDataSet = new PieChartDataSet(title, data,
labels, paints, this.pieChart2DProperties);
Dimension dimension = this.panel.getSize();
PieChart2D pieChart2D = new PieChart2D(pieChartDataSet,
this.legendProperties,
this.chartProperties,
(int) dimension.getWidth(),
(int) dimension.getHeight());
//***** BEGIN SWING SPECIFIC CODE **********************
pieChart2D.setGraphics2D((Graphics2D) this.panel.getGraphics());
pieChart2D.render();
//***** END SWING SPECIFIC CODE *************************
} catch (ChartDataException chartDataException) {
chartDataException.printStackTrace();
} catch (PropertyException propertyException) {
propertyException.printStackTrace();
}
}

private void exitForm(WindowEvent windowEvent) {
System.exit(0);
}

public static void main(String args[]) throws ChartDataException,
PropertyException {
new SwingDemo();
}
}


Este código resulta una imagen como esta:



2.- Creación de Reportes con JasperRepots y iReports: Reportes con Conexión a Base de Datos.


La siguiente prueba se realizará por medio de una aplicación standalone y no como plugin para NetBeans. Está aplicación es muy parecida a la interfaz del NetBeans.

La primera prueba a realizar consistirá en crear reportes haciendo uso de una conexión a la base de datos directamente desde nuestro reporte.

Lo primero que haremos es crear una base de datos con tablas y datos de pruebas para poder tener algo interesante que ver en nuestros reportes. Para ello, usaremos MySQL versión 5.1, usando el conector para Java versión 5.1.13.

La base de datos que usaremos para esta prueba se llamará "pruebaReportes", contiene la tabla "participantes" y constará de los siguientes campos:

  • Id: clave principal, bigint(21).

  • Nombre: varchar(100).

  • Username: varchar(100).

  • Password: varchar(100).

  • Comentarios varchar(100).

Ahora que tenemos nuestros datos crearemos un "datasource" en iReport para poder acceder a nuestros datos y hacer pruebas directamente, sin necesidad de una aplicación Java.

Para crear este datasource hacemos clic en el ícono "Report Datasources" ubicado en la barra de herramientas de iReport.

Con lo que se abrirá la ventana de "Connections / Datasources" que en este momento debe contener solo un "Empty datasource" y la conexión a una base de datos de prueba en HSQLDB. Ahora hacemos clic en el botón "New" para crear nuestro nuevo datasource.

En la nueva ventana que se abre seleccionamos "Database JDBC connection" y presionamos el botón "Next". En la siguiente ventana introducimos el nombre del datasource y los datos para establecer la conexión de la base de datos. Quedando de esta manera:



El botón "Test" nos servirá para comprobar la veracidad de todos los datos. Si es así, pulsamos "Save", para proseguir en la ventana "Connections / Datasources".

Ahora pasaremos a crear nuestro nuevo reporte. Esta será la primer y única ocasión en la que haremos uso del "Report Wizard" para ayudarnos a generar el reporte. Para esto vamos al menú "File -> New...".

Una vez abierta la ventana de "New File" seleccionaremos el formato de nuestro reporte. En este caso seleccionamos la plantilla "Wood", y hacemos clic en el botón "Launch Report Wizard".



Este wizard nos ayudará a crear un reporte 100% funcional en pocos pasos, que podremos ver desde el iReport:

  1. Selección de la localización en la que se guardará nuestro reporte.

  2. Selección del datasource y de la consulta sobre la base de datos.

  3. Selección de los datos que queremos mostrar en el reporte.

  4. Creación de grupos para el reporte.

  5. Selección del layout o acomodo de los datos en el reporte

Una vez elegido la localización y la base de datos que anteriormente creamos, "Conexion MySQL Pruebas". Completamos en “Query” con la consulta deseada pudiendo ser escrita de manera directa. En caso opuesto, y para facilitar nuestra tarea, pulsamos el botón "Design query" con lo que se abrirá una nueva ventana que está dividida en tres secciones.

La primer sección es la de la estructura de la consulta. Aquí básicamente podremos cambiar entre las sentencias que estamos editando (SELECT, WHERE, ORDER BY, etc.).

La segunda sección es la de los elementos de nuestra base de datos como tablas, vistas, y archivos temporales locales. Aquí podremos seleccionar los elementos de los que queremos obtener datos para la consulta.

Para terminar la tercera sección nos muestra los elementos que hemos seleccionado de la segunda sección para que podamos seleccionar los datos a obtener.La consulta que hemos confeccionado nos devolverá todos los datos de la tabla "participantes", con excepción del "ID". Para esto hacemos doble clic sobre el nombre de la tabla "participantes" en la segunda sección de la ventana que tenemos abierta.

Con esto aparecerá en la tercer sección otra ventana con el título "participantes" y un conjunto de checkboxes, cada uno con un campo de nuestra tabla. Completamos todos los campos deseados a mostrar. Pulsamos en el botón "OK", para continuar.



En el 4º paso tendremos que seleccionar cuáles campos de la consulta generada en el paso anterior queremos que se muestren en el reporte. Seleccionamos los deseados y hacemos clic en el botón "Next". Ahora hacemos clic en el botón "Finish" y ya podremos ver la plantilla de nuestro reporte. Si queremos ver como se verá el reporte final, en este caso, podemos ver un preview con los datos reales si cambiamos a la vista de "preview" en la ventana del editor.

Al hacer clic en la pestaña de "preview", nuestro reporte se compilará y se mostrará. En este caso el reporte puede ser pre-visualizado porque las siguientes condiciones se cumplen:

  • Tenemos una base de datos poblada.

  • Tenemos un datasource configurado para esta base de datos.

  • Nuestro reporte hace una consulta directa a esta base de datos a través de datasource anterior.

  • El reporte está preparado para mostrar los datos recuperados anteriormente.

  • Algo importante que ocurre al hacer este preview es que el reporte se compila generando el archivo "reporte1.jasper", el cual es el archivo que usaremos desde la aplicación Java que crearemos en un momento.

Si queremos compilar nuestro reporte de forma manual podemos hacer clic en el botón "Compile Report" de la vista de diseño:

Es posible realizar cambios de estilo para mejorar la visibilidad del reporte y cambios en el diseño por motivos meramente estéticos. Pudiendo dejarlo de esta manera:




No hay comentarios:

Publicar un comentario