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! Lembrando, a ultima postagem sobre o PrimeFaces foi a Parte 5, nela eu 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 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 model, e dentro dele crie uma nova classe Java com o nome de Nascimentos:
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:
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:
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:
E por aqui ficamos com mais uma postagem sobre PrimeFaces!
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 model, e dentro dele crie uma nova classe Java com o nome de 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 controle, dentro desse pacote crie uma nova classe Java com o nome de GraficosBean:
@Named @RequestScoped public class GraficosBean { private List<Nascimentos> 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 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:
<script type="text/javascript"> var chartStyle = { padding:20, legend: { display:"right", spacing:10 } }; </script>E agora sim vamos ver qual o código da lineChart:
<p:panel header="Gráfico em linhas: Nascimentos anual em uma cidade" style="width: 550px"> <p:lineChart value="#{graficosBean.nascimentos}" var="nasc" xfield="#{nasc.ano}" height="300px" width="500px" style="chartStyle"> <p:chartSeries label="Meninos" value="#{nasc.qtdMeninos}" /> <p:chartSeries label="Meninas" value="#{nasc.qtdMeninas}" /> </p:lineChart> </p:panel>
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:
<p:panel header="Gráfico em barras Nascimentos anual em uma cidade" style="width: 550px"> <p:barChart value="#{graficosBean.nascimentos}" var="nasc2" yfield="#{nasc2.ano}" height="300px" width="500px" style="chartStyle"> <p:chartSeries label="Meninos" value="#{nasc2.qtdMeninos}" /> <p:chartSeries label="Meninas" value="#{nasc2.qtdMeninas}" /> </p:barChart> </p:panel>
E pra finalizar vamos ao gráfico do tipo pizza, ou seja o pieChart:
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<Blog> acessos = new ArrayList<Blog>(); 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:
<p:panel header="Gráfico tipo pizza: Quantidade de visualizações do blog" style="width: 550px"> <p:pieChart value="#{graficosBean.acessos}" var="acessos" categoryField="#{acessos.mes}" dataField="#{acessos.qtdAcessos}" height="300px" width="500px" style="chartStyle" /> </p:panel>
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:
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <title>PrimeFaces - Parte 6</title> <script type="text/javascript"> var chartStyle = { padding:20, legend: { display:"right", spacing:10 } }; </script> </h:head> <h:body> <p:panel header="Gráfico em linhas: Nascimentos anual em uma cidade" style="width: 550px"> <p:lineChart value="#{graficosBean.nascimentos}" var="nasc" xfield="#{nasc.ano}" height="300px" width="500px" style="chartStyle"> <p:chartSeries label="Meninos" value="#{nasc.qtdMeninos}" /> <p:chartSeries label="Meninas" value="#{nasc.qtdMeninas}" /> </p:lineChart> </p:panel> <br /> <p:panel header="Gráfico em barras Nascimentos anual em uma cidade" style="width: 550px"> <p:barChart value="#{graficosBean.nascimentos}" var="nasc2" yfield="#{nasc2.ano}" height="300px" width="500px" style="chartStyle"> <p:chartSeries label="Meninos" value="#{nasc2.qtdMeninos}" /> <p:chartSeries label="Meninas" value="#{nasc2.qtdMeninas}" /> </p:barChart> </p:panel> <br /> <p:panel header="Gráfico tipo pizza: Quantidade de visualizações do blog" style="width: 550px"> <p:pieChart value="#{graficosBean.acessos}" var="acessos" categoryField="#{acessos.mes}" dataField="#{acessos.qtdAcessos}" height="300px" width="500px" style="chartStyle" /> </p:panel> </h:body> </html>
E por aqui ficamos com mais uma postagem sobre PrimeFaces!