Inicial > JSF, PrimeFaces, Primefaces > Gráficos com JSF 2 e Primefaces – Linhas

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.

  1. Eduardo Costa de Carvalho
    04/01/2012 às 09:51

    Se eu quiser baixar esse gráfico, no caso eu tenho um gráfico em linha que retira informações de um banco de dados e eu quero realizar o download da imagem para inserir em um relatório mais tarde. Tem como?

  2. nikolas soares
    13/10/2012 às 13:20

    amigo cade o codigo do arquivo xhtml, manda pra mim blz

  3. silvio
    23/04/2013 às 21:30

    se possível gostaria que me envia-se o arquivo xhtml?????

  4. Juan Martins da Silva
    15/05/2016 às 23:02

    gostaria de saber como faço pra buscar os dados no banco pra mostrar no meu grafico. grato

  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: