Java WEB: Criando gráficos com o Prime Faces e o JSF

Natal DevMedia: Assine hoje e ganhe 3 meses gr�tis

O Java Server Faces (JSF) � uma especifica��o para o desenvolvimento de aplica��es Web seguindo o padr�o Model View Controler (MVC) em Java. Essa especifica��o surgiu como uma alternativa ao Struts, que na �poca era o principal framework para implementar aplica��es nesse padr�o de projeto. Sua primeira vers�o foi disponibilizada em 2004 e em 2013 foi lan�ada a vers�o 2.2.

Atualmente, existem diversos frameworks para constru��o de interfaces ricas com o JSF, entre eles, um dos principais � o PrimeFaces que disponibiliza diversos componentes. Atualmente esse framework est� na vers�o 5.1. e cont�m um grande n�mero de componentes de formul�rios, listagem, menus, entre outros. Na vers�o 5 do framework, a API para a cria��o de gr�ficos foi toda remodelada, facilitando bastante o desenvolvimento de gr�ficos em diversos formatos diferentes.

Este artigo mostrar� como configurar uma aplica��o com JSF e PrimeFaces e tamb�m como implementar diferentes tipos de gr�ficos em uma aplica��o. Os principais tipos de gr�ficos disponibilizados s�os os gr�ficos de barra, de pizza, de �rea, entre outros.

Configurando o projeto

Para facilitar a configura��o do projeto ser� utilizado o Maven e para a cria��o desse projeto ser�o necess�rias as depend�ncias das bibliotecas do PrimeFaces e tamb�m do JSF. Para a biblioteca do PrimeFaces tamb�m � necess�rio adicionar as informa��es do reposit�rio deste. A Listagem 1 mostra o arquivo pom.xml do projeto criado.


<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.devmedia</groupId>
   <artifactId>primefaces</artifactId>
   <version>0.0.1</version>
   <packaging>war</packaging>

   <dependencies>
        
        <dependency>
              <groupId>org.primefaces</groupId>
              <artifactId>primefaces</artifactId>
              <version>5.1</version>
              <scope>compile</scope>
        </dependency>
        <dependency>
              <groupId>org.glassfish</groupId>
              <artifactId>javax.faces</artifactId>
              <version>2.1.13</version>
              <scope>compile</scope>
        </dependency>
   </dependencies>
   <repositories>
        <repository>
              <id>prime-repo</id>
              <name>PrimeFaces Maven Repository</name>
              <url>http://repository.primefaces.org</url>
              <layout>default</layout>
        </repository>
   </repositories>
</project>

Listagem 1. Configurando o projeto com o PrimeFaces 5

Depois de configurar as depend�ncias do projeto � necess�rio configurar a aplica��o para usar o framework JSF. Como o projeto � de uma aplica��o Web necessitamos criar o arquivo web.xml. O passo mais importante, � configurar o Faces Servlet, que utiliza a classe javax.faces.webapp.FacesServlet, e configurar o mapeamento das URL�s que ser�o tratadas pelo JSF, no caso, todos os endere�os que terminarem com *.xhtml. Tamb�m foi configurado que caso aconte�a algum erro na aplica��o, a requisi��o seja redirecionada para a p�gina inicial da aplica��o. A Listagem 2 mostra o c�digo do arquivo web.xml.


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name>com.devmedia.primefaces</display-name>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>/index.xhtml</welcome-file>
    </welcome-file-list>
    <error-page>
        <exception-type>javax.faces.application.ViewExpiredException</exception-type>
        <location>/index.xhtml</location>
    </error-page>
</web-app>

Listagem 2. Configura��o do Web.xml do projeto

Para executar os exemplos criados neste artigo ser� necess�rio utilizar um cont�iner Web, pois o PrimeFaces pode ser executado em qualquer um que seja compat�vel com o Java Web, entre eles o Jetty e o Tomcat. No desenvolvimento do exemplo desse artigo foi utilizado o Apache Tomcat vers�o 8.0.12.

Gr�ficos

O PrimeFaces disponibiliza diversos modelos para a constru��o de gr�ficos, mas nesse artigo ser� mostrado os modelos mais conhecidos, como gr�ficos de �rea, de pizza e de barras. Tamb�m existem diversas op��es dispon�veis para colocar nos gr�ficos, como exportar as imagens geradas, adicionar tooltips, dar zoom em regi�es espec�ficas do gr�fico, entre outros. No PrimeFaces todos os gr�ficos necessitam de um ManagedBean para a recupera��o dos dados e uma p�gina XHTML, que renderiza o gr�fico na tela do usu�rio.

O primeiro gr�fico desenvolvido foi um gr�fico de �rea, que coloca cada item um sobre o outro para que seja poss�vel comparar a quantidade de cada item e tamb�m o total de itens que existem. Um poss�vel exemplo de uso para esse gr�fico � saber a quantidade do n�vel de �gua de cada reservat�rio. Al�m de medirmos a quantidade de cada um, tamb�m � poss�vel saber a varia��o do total de �gua dispon�vel. A Listagem 3 mostra o c�digo desenvolvido para a cria��o desse gr�fico.


package com.devmedia.graficos;
 
import javax.annotation.PostConstruct;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
 
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.CategoryAxis;
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;
 
@ManagedBean(name="GraficoAreaMB")
public class GraficoArea implements Serializable {
 
    private LineChartModel areaModel;
 
    @PostConstruct
    public void init() {
        createAreaModel();
    }
 
    public LineChartModel getAreaModel() {
        return areaModel;
    }
     
    private void createAreaModel() {
        areaModel = new LineChartModel();
 
        LineChartSeries reservatorio1 = new LineChartSeries();
        reservatorio1.setFill(true);
        reservatorio1.setLabel("Cantareira");
        reservatorio1.set("2011", 40);
        reservatorio1.set("2012", 38);
        reservatorio1.set("2013", 44);
        reservatorio1.set("2014", 40);
        reservatorio1.set("2015", 47);
 
        LineChartSeries reservatorio2 = new LineChartSeries();
        reservatorio2.setFill(true);
        reservatorio2.setLabel("Guarapiranga");
        reservatorio2.set("2011", 52);
        reservatorio2.set("2012", 55);
        reservatorio2.set("2013", 52);
        reservatorio2.set("2014", 57);
        reservatorio2.set("2015", 49);
        
        LineChartSeries reservatorio3 = new LineChartSeries();
        reservatorio3.setFill(true);
        reservatorio3.setLabel("Alto Ti�te");
        reservatorio3.set("2011", 52);
        reservatorio3.set("2012", 55);
        reservatorio3.set("2013", 52);
        reservatorio3.set("2014", 57);
        reservatorio3.set("2015", 49);
 
        areaModel.addSeries(reservatorio1);
        areaModel.addSeries(reservatorio2);
        areaModel.addSeries(reservatorio3);
         
        areaModel.setTitle("N�vel");
        areaModel.setLegendPosition("ne");
        areaModel.setStacked(true);
        areaModel.setShowPointLabels(true);
         
        Axis xAxis = new CategoryAxis("Reservat�rio");
        areaModel.getAxes().put(AxisType.X, xAxis);
        Axis yAxis = areaModel.getAxis(AxisType.Y);
        yAxis.setLabel("N�vel");
        yAxis.setMin(0);
        yAxis.setMax(500);
    }
     
}

Listagem 3. ManagedBean do gr�fico de �rea

Todo gr�fico necessita de uma classe do tipo Model, que define como ser�o os dados que far�o parte do gr�fico. Nesse exemplo foi usado o LineChartModel, que � usado para o gr�fico de �rea. Para cada item do gr�fico � criado um objeto do tipo LineChartSeries e nele s�o definidos os valores que aparecer�o nos gr�ficos. A classe Axis serve para definir as op��es dos eixos do gr�fico, como valor m�nimo e m�ximo e label.

A Listagem 4 mostra o c�digo do XHTML desenvolvido para a cria��o do gr�fico de �rea, onde � poss�vel observar que o c�digo � bastante simples, bastando adicionar o componente chart, que � o mesmo componente para todos os gr�ficos do PrimeFaces, e colocar os atributos type, que define o tipo de gr�fico que ser� mostrado, al�m do atributo model, que define de onde vir�o os dados que ser�o apresentados no gr�fico.


<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui">
 
<h:head>
 
</h:head>
 
<h:body>
     <h:form>
 
          <p:chart type="line" model="#{GraficoAreaMB.areaModel}"
                style="height:300px" />
 
     </h:form>
</h:body>
</html>

Listagem 4. XHTML do gr�fico de �rea

A Figura 1 mostra o resultado da execu��o do c�digo das Listagens 3 e 4. Como � poss�vel observar, foi renderizado o gr�fico de �rea com os dados definidos no ManagedBean.

Outro tipo de gr�fico bastante usado � de pizza, cujo objetivo � mostrar a propor��o de escolhida de cada uma das op��es disponibilizadas. Esse tipo de gr�fico serve para diversas an�lises, e um exemplo de uso � quando queremos saber a propor��o de pessoas que preferem cada um dos tipos de transporte disponibilizados na cidade de S�o Paulo. A Listagem 5 mostra o c�digo do ManagedBean criado para a exibi��o do gr�fico de pizza.


package com.devmedia.graficos;
 
import javax.annotation.PostConstruct;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import org.primefaces.model.chart.PieChartModel;
 
@ManagedBean(name="GraficoPizzaMB")
public class GraficoPizza implements Serializable {
 
    private PieChartModel pieModel1;
 
    @PostConstruct
    public void init() {
        createPieModels();
    }
 
    public PieChartModel getPieModel1() {
        return pieModel1;
    }
          
    private void createPieModels() {
        createPieModel1();
    }
 
    private void createPieModel1() {
        pieModel1 = new PieChartModel();
         
        pieModel1.set("Carro", 1000);
        pieModel1.set("�nibus", 600);
        pieModel1.set("Metr�", 1500);
        pieModel1.set("Trem", 700);
        pieModel1.set("Bicicleta", 100);
         
        pieModel1.setTitle("Meio de Transporte");
        pieModel1.setLegendPosition("w");
    }
     
}

Listagem 5. Gr�fico de pizza

Para a cria��o de um gr�fico de pizza � necess�rio utilizar o PieChartModel. Nesse modelo, basta passar um nome, que ser� o label utilizado no gr�fico, e um valor, que ser� utilizado para montar a propor��o de cada um dos valores no gr�fico.

A Listagem 6 mostra o c�digo do XHTML criado para a cria��o do gr�fico de pizza. O c�digo � muito parecido com o exemplo anterior, alterando apenas o atributo type.


<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui">
 
<h:head>
 
</h:head>
 
<h:body>
     <h:form>
 
          <p:chart id="chart" type="pie" model="#{GraficoPizzaMB.pieModel1}" 
          style="width:400px;height:300px" widgetVar="chart" />
 
     </h:form>
</h:body>
</html>

Listagem 6. XHTML do gr�fico de pizza

A Figura 2 mostra o resultado da execu��o do c�digo das Listagens 5 e 6, e como � poss�vel observar, foi renderizado o gr�fico de pizza com os dados definidos no ManagedBean.

O PrimeFaces permite tamb�m a cria��o de gr�ficos de linha, que s�o aqueles para comparar a diferen�a entre itens em diversos per�odos diferentes. Um exemplo onde o gr�fico de linha � muito utilizado � nas pesquisas eleitorais, onde cada candidato � representado por uma linha e os dados s�o atualizados a cada pesquisa. A Listagem 7 mostra o c�digo desenvolvido para a cria��o de um gr�fico de linha que compara o desempenho de tr�s candidatos em cinco pesquisas diferentes.


package com.devmedia.graficos;
 
import javax.annotation.PostConstruct;
 
import java.io.Serializable;
 
import javax.faces.bean.ManagedBean;
 
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.CategoryAxis;
import org.primefaces.model.chart.ChartSeries;
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;
 
@ManagedBean(name="GraficoLinhaMB")
public class GraficoLinha implements Serializable {
 
    private LineChartModel lineModel1;
     
    @PostConstruct
    public void init() {
        createLineModels();
    }
 
    public CartesianChartModel getLineModel1() {
        return lineModel1;
    }
 
    private void createLineModels() {
        lineModel1 = initLinearModel();
        lineModel1.setTitle("Pesquisa de Opini�o");
        lineModel1.setLegendPosition("e");
        lineModel1.setShowPointLabels(true);
        lineModel1.getAxes().put(AxisType.X, new CategoryAxis("Pesquisas"));
        Axis yAxis = lineModel1.getAxis(AxisType.Y);
        yAxis.setLabel("% de votos");
        yAxis.setMin(0);
        yAxis.setMax(100);
                 
    }
     
    private LineChartModel initLinearModel() {
     LineChartModel model = new LineChartModel();
 
     ChartSeries series1 = new ChartSeries();
        series1.setLabel("Candidato 1");
 
        series1.set("Pesquisa 1", 40);
        series1.set("Pesquisa 2", 42);
        series1.set("Pesquisa 3", 47);
        series1.set("Pesquisa 4", 44);
        series1.set("Pesquisa 5", 40);
 
        ChartSeries series2 = new ChartSeries();
        series2.setLabel("Candidato 2");
 
        series2.set("Pesquisa 1", 20);
        series2.set("Pesquisa 2", 22);
        series2.set("Pesquisa 3", 26);
        series2.set("Pesquisa 4", 25);
        series2.set("Pesquisa 5", 29);
        
        ChartSeries series3 = new ChartSeries();
        series3.setLabel("Candidato 3");
 
        series3.set("Pesquisa 1", 10);
        series3.set("Pesquisa 2", 12);
        series3.set("Pesquisa 3", 16);
        series3.set("Pesquisa 4", 15);
        series3.set("Pesquisa 5", 19);
 
        model.addSeries(series1);
        model.addSeries(series2);
        model.addSeries(series3);
         
        return model;
    }
      
}

Listagem 7. ManagedBean do gr�fico de linha

Para a cria��o do gr�fico de linhas � utilizado o modelo LineChartModel. Nesse modelo � necess�rio criar ChartSeries, que representa cada uma das linhas do gr�fico. Nas s�ries s�o passados os dados que ser�o mostrados no gr�fico, normalmente um label para o eixo X e um valor para o eixo Y.

A Listagem 8 mostra o c�digo do XHTML criado para a cria��o do gr�fico de linha.


<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui">
 
<h:head>
 
</h:head>
 
<h:body>
     <h:form>
 
          <p:chart type="line" model="#{GraficoLinhaMB.lineModel1}"
                style="height:300px;width:800px;" />
 
     </h:form>
</h:body>
</html>

Listagem 8. XHTML para a cria��o do gr�fico de linhas

A Figura 3 mostra o resultado da execu��o do c�digo das Listagens 7 e 8.

Uma funcionalidade interessante e que pode ser utilizada em qualquer gr�fico � o zoom. Com ele � poss�vel selecionar uma �rea espec�fica do gr�fico e aumentar a imagem, apenas na parte desejada. A Listagem 9 mostra como utilizar o zoom em um gr�fico de linhas. A �nica modifica��o significativa em rela��o ao exemplo anterior � a chamada do m�todo setZoom, pois apenas com isso � poss�vel utilizar o zoom no gr�fico. Isso pode ser feito para qualquer gr�fico do PrimeFaces. O c�digo do XHTML n�o � apresentado porque n�o existem nenhuma altera��o em rela��o ao exemplo anterior.


package com.devmedia.graficos;
 
import javax.annotation.PostConstruct;
 
import java.io.Serializable;
 
import javax.faces.bean.ManagedBean;
 
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.CategoryAxis;
import org.primefaces.model.chart.ChartSeries;
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;
 
@ManagedBean(name="GraficoLinhaMB")
public class GraficoLinha implements Serializable {
 
    private LineChartModel lineModel1;
     
    @PostConstruct
    public void init() {
        createLineModels();
    }
 
    public CartesianChartModel getLineModel1() {
        return lineModel1;
    }
 
    private void createLineModels() {
     lineModel1 = initLinearModel();
        lineModel1.setTitle("Pesquisa de Opini�o");
        lineModel1.setLegendPosition("e");
        lineModel1.setShowPointLabels(true);
        lineModel1.getAxes().put(AxisType.X, new CategoryAxis("Pesquisas"));
        lineModel1.setZoom(true);
        
        Axis yAxis = lineModel1.getAxis(AxisType.Y);
        yAxis.setLabel("% de votos");
        yAxis.setMin(0);
        yAxis.setMax(100);
                 
    }
     
    private LineChartModel initLinearModel() {
     LineChartModel model = new LineChartModel();
 
     ChartSeries series1 = new ChartSeries();
        series1.setLabel("Candidato 1");
 
        series1.set("Pesquisa 1", 40);
        series1.set("Pesquisa 2", 42);
        series1.set("Pesquisa 3", 47);
        series1.set("Pesquisa 4", 44);
        series1.set("Pesquisa 5", 40);
 
        ChartSeries series2 = new ChartSeries();
        series2.setLabel("Candidato 2");
 
        series2.set("Pesquisa 1", 20);
        series2.set("Pesquisa 2", 22);
        series2.set("Pesquisa 3", 26);
        series2.set("Pesquisa 4", 25);
        series2.set("Pesquisa 5", 29);
        
        ChartSeries series3 = new ChartSeries();
        series3.setLabel("Candidato 3");
 
        series3.set("Pesquisa 1", 10);
        series3.set("Pesquisa 2", 12);
        series3.set("Pesquisa 3", 16);
        series3.set("Pesquisa 4", 15);
        series3.set("Pesquisa 5", 19);
 
        model.addSeries(series1);
        model.addSeries(series2);
        model.addSeries(series3);
         
        return model;
    }
      
}

Listagem 9. Zoom em um gr�fico de linhas

A Figura 4 mostra o resultado da execu��o do c�digo da Listagem 9. Como � poss�vel observar, foi renderizado o gr�fico de linha com os dados definidos no ManagedBean, mas aplicado um zoom, que mostra apenas parte do gr�fico.

Com isso este artigo mostrou como criar diversos tipos de gr�ficos com o PrimeFaces e o JavaServer Faces. O projeto utilizou a vers�o mais recente do PrimeFaces, que � hoje um dos principais frameworks para a cria��o de interfaces ricas do JSF.

Confira outros conte�dos:

Por Eduardo Em 2015

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Paulo Lima

bom dia, eu estou tentando criar um gr�fico de pizza para um projeto, mas estou recebendo o erro : javax.el.PropertyNotFoundException: Property 'model' not found on type br.com.cogerh.template.controller.GraficoBean

segue o c�digo do meu projeto :

No Bean

private PieChartModel model;

private void criarPieModel() {

model = new PieChartModel();
for(int i = 0; i < particaoList.size();i++){
model.set("Em Uso", Double.parseDouble(particaoList.get(i).getEmUso()));
double livre = Double.parseDouble(particaoList.get(i).getTotal()) - Double.parseDouble(particaoList.get(i).getEmUso() );
model.set("Livre", livre);

}

model.setTitle("Disco");
model.setLegendPosition("w");
}

public PieChartModel getModel() {
return model;
}

public void setModel(PieChartModel model) {
this.model = model;
}

e no xhtml :

<h:form id="form">
<p:chart type="pie" model="#{graficoBean.model}" responsive="true"></p:chart>
</h:form>

parece que o xhtml n�o est� conseguindo acessar o atributo model, eu preciso fazer alguma configura��o para usar os gr�ficos do primefaces ?

há +1 ano

Ver coment�rios anteriores (6)

Marcio Souza

Ol� Paulo.
Tem que habilitar via c�digo. Use o m�todo setShowDataLabels(), do seu PieChartModel, passando o par�metro como true. Aqui na documenta��o - https://primefaces.github.io/primefaces/7_0/#/components/chart?id=piechartmodel - tem alguns outros m�todos que voc� pode usar para customizar o seu gr�fico.

há +1 ano