Uso de componentes JSF de gráficos con el soporte de Primefaces.

4
25286

Uso de componentes JSF de gráficos con el soporte de Primefaces.

0. Índice de contenidos.


1. Introducción

En este tutorial vamos a ver cómo generar, de una manera sencilla, gráficos estadísticos con el soporte de los componentes JSF de Primefaces.

JSF es un lenguaje orientado a la creación de árboles de componentes visuales en el servidor de modo que trata de independizar el desarrollo de la interfaz visual, del lenguaje del cliente en el que se interpretará. JSF nos proporciona la renderización de los componentes visuales en el lenguaje del cliente de modo que, por ejemplo, para incorporar un componente de selección de fecha, haciendo uso de una librería de componentes visuales como Primefaces, no debemos preocuparnos del html o javascript que se necesitará en el cliente para generarlo, puesto que ya lo incorpora el renderizador del propio componente.

Extrapolado a los componentes que vamos a ver en este tutorial, para generar un gráfico de líneas o de barras, solo vamos a hacer uso de un componente visual en el lado del servidor, proporcionándole una estructura de datos a mostrar y, su renderización en el navegador, para nosotros, será transparente.

Con la versión 3 de Primefaces los componentes de gráficos han sido reescritos para generarse con el soporte de canvas de HTML5 y, para renderizarlos correctamente en las versiones de IE que no soportan canvas, utilizan el plugin excanvas.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.4 GHz Intel Core i7, 8GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Lion 10.7.2
  • JSF 2.1, Mojarra 2.1.4
  • Primefaces 3.0.1
  • Apache Tomcat 7.0.6


3. Modelo de datos.

Para mostrar información en los componentes visuales que vamos a ver en este tutorial, primero necesitamos una estructura de datos que mostrar.

Esa estructura de datos la debemos asignar a una clase que representa la información para un gráfico cartesiano: org.primefaces.model.chart.CartesianChartModel.


import java.io.Serializable;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;

import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.ChartSeries;

@ManagedBean
public class Statistics implements Serializable {

	private static final long serialVersionUID = 6401166601481931346L;
	
	private CartesianChartModel viviendas;  

	public CartesianChartModel getViviendas() {
		return viviendas;
	}

	@PostConstruct
	public void init(){
		viviendas = new CartesianChartModel();
		
		final ChartSeries venta  = new ChartSeries("Venta");
		venta.set("2008", 800);
		venta.set("2009", 1300);
		venta.set("2010", 700);
		venta.set("2011", 500);
		
		final ChartSeries alquiler  = new ChartSeries("Alquiler");
		alquiler.set("2008", 1200);
		alquiler.set("2009", 1100);
		alquiler.set("2010", 1700);
		alquiler.set("2011", 1900);
		
		viviendas.addSeries(venta);
		viviendas.addSeries(alquiler);

	}
}

El modelo será común para todos los tipos de componentes que vamos a ver, puesto que son los que se basan en un eje de coordenadas.


4. Gráfico de líneas.

Para incluir un gráfico de líneas solo tenemos que incluir el siguiente componente, haciendo referencia a nuestra estructura de datos a través de EL:


	<p:lineChart value="#{statistics.viviendas}" legendPosition="e"  
      title="Gestión de viviendas" style="height:300px"
      xaxisLabel="Año" yaxisLabel="Número de viviendas" /> 
     				

Con ello, tendremos en nuestra interfaz un gráfico como el que sigue:


5. Gráfico de áreas.

El gráfico de líneas lo podemos convertir en un gráfico de área simplemente añadiendo el atributo fill=true:


	<p:lineChart value="#{statistics.viviendas}" legendPosition="ne"  
      title="Gestión de viviendas" style="height:300px"
      fill="true" xaxisLabel="Año" yaxisLabel="Número de viviendas"  />  
					

El resultado será el siguiente:


6. Gráfico de barras.

Podemos incluir un gráfico de barras, al igual que con los anteriores, incluyendo el siguiente componente en nuestro árbol:


	<p:barChart value="#{statistics.viviendas}" legendPosition="ne" 
      title="Gestión de viviendas" style="height:300px"
  	  xaxisLabel="Año" yaxisLabel="Número de viviendas" />
					

El resultado será el siguiente:

Podemos modificar la orientación de las barras con la propiedad orientation=»horizontal» y apilar la información con stacked=»true».


7. Referencias.

  • http://www.primefaces.org/showcase-labs/ui/chartsHome.jsf


8. Conclusiones.

Como contamos en nuestros cursos de JSF, sus componentes nos encapsulan el lenguaje de cliente y nos abstraen de trabajar con el html y/o javascript necesarios para realizar este tipo de funcionalidades más o menos manualmente pero, sobre todo, nos facilitan las tareas de mapeo, conversión y validación de los valores que encapsulan en la lógica de control de nuestra aplicación.

Primefaces, como librería de componentes visuales para JSF, nos proporciona una serie de componentes, listos para usar, de una gran calidad.

Un saludo.

Jose

jmsanchez@autentia.com

4 COMENTARIOS

  1. Hola, quería saber si tienes algun ejemplo en el cual se puedan traer los datos desde una consulta, por ejemplo mostrar un promedio de alumnos y mostrarlos en el grafico

  2. Hola, es posible realizar la grafica de una tabla de este tipo:

    Materia Nombre Tardanzas Asistencias
    Matematicas Estudiante1 20 10
    Estudiante2 10 14
    Algebra Estudiante1 30 15
    Estudiante2 10 20
    Estadistica Estudiante1 10 14
    Estudiante2 15 10

    Gracias por la ayuda y tu atencion.

  3. Hola Buenos días,

    Alguna de las versiones de PrimeFaces Esta liberada para su uso comercial, queria usar esta librería y no estoy seguro de si puedo o hay alguna versión que se puede utilizar en una empresa pública

    Saludos y muchas gracias

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad