Categorías del Tutorial

icono_twiter
Jose Manuel Sánchez Suárez

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

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: 2012-01-26

Tutorial visitado 8.455 veces Descargar en PDF
Uso de componentes JSF de gráficos con el soporte de Primefaces.

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.


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

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: 2013-11-04-16:55:42

Autor: tav0

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

Fecha publicación: 2012-02-23-12:29:39

Autor: jony88

muy buen tutorial, gracias por el aporte, saludos.