Graficos com PrimeFaces
1 gostou3,213 visualizações
Este documento descreve como criar gráficos usando a API PrimeFaces no Java. Ele explica como configurar um projeto Java com as dependências necessárias, criar classes para armazenar dados de vendas por país e ano, e usar objetos da PrimeFaces para gerar gráficos de colunas e pizza na interface visualizando esses dados.
Graficos com PrimeFaces
- 2. Motivação Aprender a criar e manipular gráficos utilizando a tecnologia JAVA WEB.
- 3. 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.
- 4. Montando o cenário Utilizaremos um cenário hipotético expressando o total de vendas(em milhões) por ano dos países abaixo: Brasil; Estados Unidos; Alemanha.
- 5. Dados hipotéticos 2011 100 2012 120 2013 50 2011 160 2012 130 2013 78 2011 30 2012 80 2013 23 País Ano Total de Vendas
- 6. 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.
- 7. Mão na massa Estrutura final do projeto Eclipse
- 8. 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.
- 9. 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.
- 10. Nosso arquivo GraficoColunaBean.java - PARTE 1 Objetos ChartSeries que comporão o objeto CartesianChartModel
- 11. Nosso arquivo GraficoColunaBean.java - PARTE 2 Classe resposável por gerar os gráficos na visão. Adicionamos os objetos ChartSeries ao objeto Colunas
- 12. Visão Grá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.
- 13. Enfim... Gráficos! Label dos objetos ChartSeries Valor minimo e máximo definidos na view usando a tag barChart do PrimeFaces Ano das vendas
- 14. Gráfico Pizza Agora Veremos como funciona a classe PieChartModel, reponsável por gerar o gráfico no formato Pizza.
- 15. 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.
- 16. 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.