JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 6
Autor: andii.brunetta | Publicado: 2011-08-09T17:59:00-04:00


Olá Pessoal!

Depois de mais de um mês aqui estou eu voltando com as postagens do Java sem café.! E para começar bem, nada melhor do que continuar com as postagens sobre o PrimeFaces!&nbsp;Lembrando, a ultima postagem sobre o PrimeFaces foi a Parte 5, nela eu&nbsp;comentei sobre não ter conseguido fazer os gráficos do PrimeFaces, pois bem, com a ajuda do amigo Jamir Luiz, agora eu consegui fazer os gráficos funcionarem, então como vocês podem imaginar, a postagem de hoje é sobre os gráficos do PrimeFaces!



Estrutura do projeto



Caso não saiba como montar a estrutura do projeto&nbsp;veja aqui.




Depois de pronto o projeto fica com essa estrutura:






Vamos começar pelo gráfico em linhas, o lineChart:






Código-fonte:
Para este exemplo vamos precisar de uma classe Nascimentos (pojo), então dentro de pacote de códigos fonte crie um novo pacote com o nome de&nbsp;model, e dentro dele crie uma nova classe Java com o nome de&nbsp;Nascimentos:
public class Nascimentos {
    private String ano;
    private int qtdMeninos;
    private int qtdMeninas;

    public Nascimentos(String ano, int qtdMeninos, int qtdMeninas) {
        this.ano = ano;
        this.qtdMeninos = qtdMeninos;
        this.qtdMeninas = qtdMeninas;
    }

   //GETTERS e SETTERS
}
Agora vamos criar o nosso bean que vai dar suporte aos nossos gráficos, para isso crie um pacote com o nome de&nbsp;controle, dentro desse pacote crie &nbsp;uma nova classe Java com o nome de&nbsp;GraficosBean:
@Named
@RequestScoped
public class GraficosBean {

    private List&lt;Nascimentos&gt; nascimentos = new ArrayList();

    public GraficosBean() {
        nascimentos.add(new Nascimentos("2008", 120, 53));
        nascimentos.add(new Nascimentos("2009", 100, 70));
        nascimentos.add(new Nascimentos("2010", 80, 120));
        nascimentos.add(new Nascimentos("2011", 100, 130));   
    }

    //GETTERS E SETTERS

}

Vamos &nbsp;para a página index, mas antes disso, tem um detalhe importante sobre as legendas dos gráficos (isso serve para os 3 tipos de gráficos que veremos aqui), dentro da tag h:head, precisamos do seguinte código javascript:
&lt;script type="text/javascript"&gt;
     var chartStyle = {
           padding:20,
           legend: {
                display:"right",
                spacing:10
           }
     };
&lt;/script&gt;

E agora sim vamos ver qual o código da lineChart:
&lt;p:panel header="Gráfico em linhas: Nascimentos anual em uma cidade" style="width: 550px"&gt;
      &lt;p:lineChart value="#{graficosBean.nascimentos}" var="nasc"  xfield="#{nasc.ano}"
                   height="300px" width="500px" style="chartStyle"&gt;
          &lt;p:chartSeries label="Meninos" value="#{nasc.qtdMeninos}" /&gt;
          &lt;p:chartSeries label="Meninas" value="#{nasc.qtdMeninas}" /&gt;
     &lt;/p:lineChart&gt;
&lt;/p:panel&gt;


Veja que na propriedade style da tag p:lineChart é onde eu referencio o código javascript. E são as tags p:chartSeries que definem as linhas do gráfico.

Bom... tudo isso que eu falei acima também vale para o barChart, que é nosso gráfico em barras:






Código-fonte: A única coisa que difere do lineChart é a tag mesmo, então, fica dessa forma:
&lt;p:panel header="Gráfico em barras Nascimentos anual em uma cidade" style="width: 550px"&gt;
        &lt;p:barChart value="#{graficosBean.nascimentos}" var="nasc2"  yfield="#{nasc2.ano}"
                height="300px" width="500px" style="chartStyle"&gt;
                &lt;p:chartSeries label="Meninos" value="#{nasc2.qtdMeninos}" /&gt;
                &lt;p:chartSeries label="Meninas" value="#{nasc2.qtdMeninas}" /&gt;
        &lt;/p:barChart&gt;
&lt;/p:panel&gt;


E pra finalizar vamos ao gráfico do tipo pizza, ou seja o pieChart:






Código-fonte:
Para este tipo de gráfico vamos precisar de mais uma classe (pojo), por isso dentro do pacote model, crie uma nova classe java com o nome de Blog:
public class Blog {

    private String mes;
    private int qtdAcessos;

    public Blog(String mes, int qtdAcessos) {
        this.mes = mes;
        this.qtdAcessos = qtdAcessos;
    }

    //Getters e Setters
}

E o nosso bean GraficosBean, terá o seguinte código:
@Named
@RequestScoped
public class GraficosBean {

    private List&lt;Blog&gt; acessos = new ArrayList&lt;Blog&gt;();

    public GraficosBean() {
        acessos.add(new Blog("Jan/2011", 2129));
        acessos.add(new Blog("Fev/2011", 2380));
        acessos.add(new Blog("Mar/2011", 5221));
        acessos.add(new Blog("Abr/2011", 7723));
        acessos.add(new Blog("Mai/2011", 15327));
        acessos.add(new Blog("Jun/2011", 22302));
        acessos.add(new Blog("Jul/2011", 15908));
        
    }

    //Getters e Setters
}

E o index ficará dessa forma:
&lt;p:panel header="Gráfico tipo pizza: Quantidade de visualizações do blog" style="width: 550px"&gt;
      &lt;p:pieChart value="#{graficosBean.acessos}" var="acessos" categoryField="#{acessos.mes}"
               dataField="#{acessos.qtdAcessos}" height="300px" width="500px" style="chartStyle" /&gt;
&lt;/p:panel&gt;


Veja que para o pieChart não é necessário a tag p:chartSeries. Da mesma forma que os gráficos anteriores o pieChart precisa da propriedade style que se referencia ao código javascript.

E por fim, o código completo da página index.xhtml:
&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"&gt;
    &lt;h:head&gt;
        &lt;title&gt;PrimeFaces - Parte 6&lt;/title&gt;
        &lt;script type="text/javascript"&gt;
            var chartStyle = {
                padding:20,
                legend: {
                        display:"right",
                        spacing:10
                        }
            };
        &lt;/script&gt;
    &lt;/h:head&gt;
    &lt;h:body&gt;
        &lt;p:panel header="Gráfico em linhas: Nascimentos anual em uma cidade" style="width: 550px"&gt;
            &lt;p:lineChart value="#{graficosBean.nascimentos}" var="nasc"  xfield="#{nasc.ano}"
                         height="300px" width="500px" style="chartStyle"&gt;
                &lt;p:chartSeries label="Meninos" value="#{nasc.qtdMeninos}" /&gt;
                &lt;p:chartSeries label="Meninas" value="#{nasc.qtdMeninas}" /&gt;
            &lt;/p:lineChart&gt;
        &lt;/p:panel&gt;

        &lt;br /&gt;

        &lt;p:panel header="Gráfico em barras Nascimentos anual em uma cidade" style="width: 550px"&gt;
            &lt;p:barChart value="#{graficosBean.nascimentos}" var="nasc2"  yfield="#{nasc2.ano}"
                        height="300px" width="500px" style="chartStyle"&gt;
                &lt;p:chartSeries label="Meninos" value="#{nasc2.qtdMeninos}" /&gt;
                &lt;p:chartSeries label="Meninas" value="#{nasc2.qtdMeninas}" /&gt;
            &lt;/p:barChart&gt;
        &lt;/p:panel&gt;

        &lt;br /&gt;

        &lt;p:panel header="Gráfico tipo pizza: Quantidade de visualizações do blog" style="width: 550px"&gt;
            &lt;p:pieChart value="#{graficosBean.acessos}" var="acessos" categoryField="#{acessos.mes}"
                        dataField="#{acessos.qtdAcessos}" height="300px" width="500px" style="chartStyle" /&gt;
        &lt;/p:panel&gt;


    &lt;/h:body&gt;
&lt;/html&gt;


E por aqui ficamos com mais uma postagem sobre PrimeFaces!