Arquivo

Archive for the ‘Primefaces’ Category

Gráficos com JSF 2 e Primefaces – Linhas

Dando continuidade a nossa série de posts sobre gráficos, mostrarei agora como criar um gráfico de linhas. Nosso exemplo mostrarei a evolução de três times durante cinco rodadas do brasileirão.

Basicamente a diferença entre o gráfico de torta e o de linhas é que no de torta analisamos a representação dos dados de um objeto com relação ao todo e no de linhas iremos analisar evoluções do objeto durante etapas(períodos).

No exemplo utilizamos:

– Netbeans 7.0.1
– Primeface 3.0 M3
– Jsf 2.1

Abaixo uma breve explicação sobre os principais atribudos do componente lineChar:

 Nome

Valor Padão

Tipo

Descrição

id

null

String

Identificador único

rendered

TRUE

Boolean

Indica que o componente deve ou não ser renderizado na tela

binding

null

Object

Uma expression language que faz o mapeamento do componente com um objeto UICOmponente localizado no backingbean.

value

null

Collection

É o modelo do gráfico

legendPosition

null

Object

Campo que indica a posição da legenda. Coloque as siglas dos pontos cardeais em inglês. Ex.: w, ne, n, etc.

style

null

String

Define o estilo do painel do gráfico, tamanho, tamanho de fonte, etc.

seriesStyle

null

String

Cores dos items. Coloque as cores em formato RGB sem o #.

minY/minX

null

Double

Menor valor para a dimensão Y/X.

maxY/maxX

null

Double

Maior valor para a dimensão Y/X.

yaxisLabel

null

String

Rótulo dos dados da dimensão Y

xaxisLabel

null

String

Rótulo dos dados da simensão X

No nosso projeto iremos utilizar apenas beans(modelos) e managedbeans, isso para facilitar o entendimento. Abaixo, como ficou a organização do projeto:

Observe que criamos 3 modelos, um para a Equipe(Time), outro para Rodada e mais um representando o relacionamento entre as duas. Como nosso objetivo é explicar o componente, não coloquei muitos atributos nos modelos, apenas o necessário para conseguir a compreensão. vejam abaixo os modelos:

Rodada.java

public class Rodada {

    private String numero;

    public Rodada(String numero) {
        this.numero = numero;
    }

    public String getNumero() {
        return numero;
    }

    public void setNumero(String numero) {
        this.numero = numero;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Rodada other = (Rodada) obj;
        if ((this.numero == null) ? (other.numero != null) : !this.numero.equals(other.numero)) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 5;
        hash = 11 * hash + (this.numero != null ? this.numero.hashCode() : 0);
        return hash;
    }
}

Time.java

public class Time {

    private String nome;

    public Time(String nome) {
        this.nome = nome;
    }

    public String getNome() {
        return nome;
    }

    public void setNome(String nome) {
        this.nome = nome;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Time other = (Time) obj;
        if ((this.nome == null) ? (other.nome != null) : !this.nome.equals(other.nome)) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 5;
        hash = 59 * hash + (this.nome != null ? this.nome.hashCode() : 0);
        return hash;
    }
}

TimeRodada.java

public class TimeRodada {

    private Time time;
    private Rodada rodada;
    private int pontos;

    public int getPontos() {
        return pontos;
    }

    public void setPontos(int pontos) {
        this.pontos = pontos;
    }

    public Rodada getRodada() {
        return rodada;
    }

    public void setRodada(Rodada rodada) {
        this.rodada = rodada;
    }

    public Time getTime() {
        return time;
    }

    public void setTime(Time time) {
        this.time = time;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final TimeRodada other = (TimeRodada) obj;
        if (this.time != other.time && (this.time == null || !this.time.equals(other.time))) {
            return false;
        }
        if (this.rodada != other.rodada && (this.rodada == null || !this.rodada.equals(other.rodada))) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 7;
        hash = 31 * hash + (this.time != null ? this.time.hashCode() : 0);
        hash = 31 * hash + (this.rodada != null ? this.rodada.hashCode() : 0);
        return hash;
    }
}

Abaixo iremos explicar o managed bean GraficoLinhaBean.java

@ManagedBean
@ViewScoped
public class GraficoLinhaBean {

    private List timesRodadas = new ArrayList();
    private List<time> times = new ArrayList<time>();
 private List rodadas = new ArrayList();
 private CartesianChartModel rodadasBrasileirao = new CartesianChartModel();

 public GraficoLinhaBean() {
 criarDados();
 criarModelo();
 }

 public CartesianChartModel getRodadasBrasileirao() {
 return rodadasBrasileirao;
 }

 public void setRodadasBrasileirao(CartesianChartModel rodadasBrasileirao) {
 this.rodadasBrasileirao = rodadasBrasileirao;
 }

 public List getRodadas() {
 return rodadas;
 }

 public void setRodadas(List rodadas) {
 this.rodadas = rodadas;
 }

 public List<time> getTimes() {
 return times;
 }

 public void setTimes(List<time> times) {
 this.times = times;
 }

 public List getTimesRodadas() {
 return timesRodadas;
 }

 public void setTimesRodadas(List timesRodadas) {
 this.timesRodadas = timesRodadas;
 }

 private void criarDados() {
 Rodada r = new Rodada("1");
 rodadas.add(r);
 Rodada r2 = new Rodada("2");
 rodadas.add(r2);
 Rodada r3 = new Rodada("3");
 rodadas.add(r3);
 Rodada r4 = new Rodada("4");
 rodadas.add(r4);
 Rodada r5 = new Rodada("5");
 rodadas.add(r5);
 Time t = new Time("Corinthians");
 times.add(t);
 Time t2 = new Time("São Paulo");
 times.add(t2);
 Time t3 = new Time("Flamengo");
 times.add(t3);
 //Rodada 1
 TimeRodada tr = new TimeRodada();
 tr.setTime(t);
 tr.setRodada(r);
 tr.setPontos(3);
 timesRodadas.add(tr);
 TimeRodada tr2 = new TimeRodada();
 tr2.setTime(t2);
 tr2.setRodada(r);
 tr2.setPontos(1);
 timesRodadas.add(tr2);
 TimeRodada tr3 = new TimeRodada();
 tr3.setTime(t3);
 tr3.setRodada(r);
 tr3.setPontos(1);
 timesRodadas.add(tr3);
 //Rodada 2
 TimeRodada tr4 = new TimeRodada();
 tr4.setTime(t);
 tr4.setRodada(r2);
 tr4.setPontos(6);
 timesRodadas.add(tr4);
 TimeRodada tr5 = new TimeRodada();
 tr5.setTime(t2);
 tr5.setRodada(r2);
 tr5.setPontos(2);
 timesRodadas.add(tr5);
 TimeRodada tr6 = new TimeRodada();
 tr6.setTime(t3);
 tr6.setRodada(r2);
 tr6.setPontos(4);
 timesRodadas.add(tr6);
 //Rodada 3
 TimeRodada tr7 = new TimeRodada();
 tr7.setTime(t);
 tr7.setRodada(r3);
 tr7.setPontos(9);
 timesRodadas.add(tr7);
 TimeRodada tr8 = new TimeRodada();
 tr8.setTime(t2);
 tr8.setRodada(r3);
 tr8.setPontos(5);
 timesRodadas.add(tr8);
 TimeRodada tr9 = new TimeRodada();
 tr9.setTime(t3);
 tr9.setRodada(r3);
 tr9.setPontos(5);
 timesRodadas.add(tr9);
 //Rodada 4
 TimeRodada tr10 = new TimeRodada();
 tr10.setTime(t);
 tr10.setRodada(r4);
 tr10.setPontos(12);
 timesRodadas.add(tr10);
 TimeRodada tr11 = new TimeRodada();
 tr11.setTime(t2);
 tr11.setRodada(r4);
 tr11.setPontos(6);
 timesRodadas.add(tr11);
 TimeRodada tr12 = new TimeRodada();
 tr12.setTime(t3);
 tr12.setRodada(r4);
 tr12.setPontos(8);
 timesRodadas.add(tr12);
 //Rodada 5
 TimeRodada tr13 = new TimeRodada();
 tr13.setTime(t);
 tr13.setRodada(r5);
 tr13.setPontos(15);
 timesRodadas.add(tr13);
 TimeRodada tr14 = new TimeRodada();
 tr14.setTime(t2);
 tr14.setRodada(r5);
 tr14.setPontos(6);
 timesRodadas.add(tr14);
 TimeRodada tr15 = new TimeRodada();
 tr15.setTime(t3);
 tr15.setRodada(r5);
 tr15.setPontos(9);
 timesRodadas.add(tr15);
 }

 private void criarModelo() {
 rodadasBrasileirao = new CartesianChartModel();
 for (Time time : times) {
 ChartSeries cs = new ChartSeries();
 for (Rodada rodada : rodadas) {
 TimeRodada tr = new TimeRodada();
 tr.setRodada(rodada);
 tr.setTime(time);
 for (TimeRodada timeRodada : timesRodadas) {
 if (timeRodada.equals(tr)) {
 cs.setLabel(timeRodada.getTime().getNome());
 cs.set(timeRodada.getRodada().getNumero(), timeRodada.getPontos());
 }
 }
 }
 rodadasBrasileirao.addSeries(cs);
 }
 }
}

Vejamos que no construtor eu chamo o metodo criarDados que cria as rodadas e os times, alem de preencher preencher o relacionamento com os pontos de cada time em cada rodada.

No bean temos um objeto da classe CartesianChartModel, este objeto ira espelhar o componente lineChart no managedBean, ou seja, da forma como montarmos este objeto, ser exibida na view.

Com a classe CartesianChartModel trabalharemos com ChartSeries, para criar as linhas do grafico. Cada linha devera ser um novo objeto que atraves do metodo setLabel definimos o nome que aquela linha representara e atraves do set inserimos os dados da dimensao X e Y nesta sequencia.
Em criarModelo eu percorri todos os Times criando uma linha para representar cada um, depois preenchi os dados dos pontos em cada rodada formando o grafico da evolucao dos time, confira no final do post.

Abaixo voces podem conferir a view index.xhtml:

        Exemplo de Gráficos com Primefaces - Linha

Em value definimos o objeto do bean que representará o gráfico, a posição da legenda, o valor minimo de X e Y e os rotulos de X e Y, um titulo e o estilo(tamanho, margem, etc).

Ah! Tentem clicar sobre o nome de um dos time para ver o resultado,  bem interessante. Bem, e isso! Abraco e espero que gostem do resultado.