Download - Graficos com PrimeFaces
![Page 1: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/1.jpg)
GráficosCom
Por Bruno Paulino
![Page 2: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/2.jpg)
Motivação
Aprender a criar e manipular gráficos utilizando a tecnologia JAVA WEB.
![Page 3: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/3.jpg)
Mas, como?
Problema: Como criar gráficos com um sistema desenvolvido em JAVA e JSF?Solução: Utilizando a API PrimeFaces para fazer esse duro trabalho por nós.
![Page 4: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/4.jpg)
Montando o cenárioUtilizaremos um cenário hipotético expressando o total de vendas(em milhões) por ano dos países abaixo:
Brasil;Estados Unidos;Alemanha.
![Page 5: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/5.jpg)
Dados hipotéticos
2011 1002012 1202013 502011 1602012 1302013 782011 302012 802013 23
País Ano Total de Vendas
![Page 6: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/6.jpg)
Mão na massa
1. Crie um projeto Java Web no Eclipse e adicione as dependências JSF;
2. acesse www.primefaces.org e faça o download do .jar mais atual (por enquanto é a versão 3.5);
3. inclua no seu projeto Eclipse o .jar do primefaces.
![Page 7: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/7.jpg)
Mão na massaEstrutura final do projeto Eclipse
![Page 8: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/8.jpg)
Mão na massa
1. Classe País:• String nome;• Map<String, Integer> vendas;
Armazena o nome do País e os anos e o volume de vendas do respectivo ano.
![Page 9: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/9.jpg)
Gráficos em Colunas Classe GraficoColunaBean :• Utiliza o objeto do tipo CartesianChartModel (Classe própria do PrimeFaces);
• Utiliza o objeto do tipo ChartSeries(Classe própria do Primefaces);
CartesianChartModel:
•Classe resposável por manipular os objetos ChartSeries e gerar o gráfico para a view.
ChartSeries:
•Classe resposável por armazenar os dados de cada país(nome, ano e total de vendas) e compor o objeto CartesianChartModel.
![Page 10: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/10.jpg)
Nosso arquivo GraficoColunaBean.java - PARTE 1
Objetos ChartSeries que comporão o objeto CartesianChartModel
![Page 11: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/11.jpg)
Nosso arquivo GraficoColunaBean.java - PARTE 2
Classe resposável por gerar os gráficos na visão.
Adicionamos os objetos ChartSeries ao objeto Colunas
![Page 12: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/12.jpg)
VisãoGráficos em Colunas
Nosso arquivo primecolunas.xhtml
Propriedade do tipo CartesianChartModel do Bean
colunaBean.
tag barChart do PrimeFaces que recebe um objeto CartesianChartModel e monta
o gráfico na View.
![Page 13: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/13.jpg)
Enfim... Gráficos! Label dos objetos ChartSeries
Valor minimo e máximo definidos na view usando
a tag barChart do PrimeFaces
Ano das vendas
![Page 14: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/14.jpg)
Gráfico Pizza
Agora Veremos como funciona a classe PieChartModel, reponsável por gerar o gráfico no formato Pizza.
![Page 15: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/15.jpg)
Nosso arquivo GraficoPizzaBean.java
Classe responsável por gerar o gráfico Pizza na view.
Adicionamos o nome e o total de vendas de cada país no ano de 2011
ao objeto PieChartModel.
![Page 16: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/16.jpg)
Nosso arquivo PrimePizza.xhtml
Aqui acessamos a propriedade pizza do tipo PieChartModel do Bean
pizzaBean
tag pieChart do PrimeFaces que recebe um objeto PieChartModel e monta o
gráfico na View.
![Page 17: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/17.jpg)
Novamente... Gráficos!
Código Fonte:https://github.com/brunojppb/GraficosComPrimeFaces
![Page 18: Graficos com PrimeFaces](https://reader031.vdocuments.pub/reader031/viewer/2022020710/54969352ac7959042e8b512c/html5/thumbnails/18.jpg)
if(DUVIDAS){ “Podem perguntar”;}else{ “Obrigado!”;}