Olá desenvolvedores, neste tutorial aprenderemos como criar um gráfico de salários como a biblioteca de componentes PrimeFaces. No tutorial onde de forma breve falamos um pouco da história do PrimeFaces, citamos algumas das melhorias implementadas desde o ano de seu lançamento em 2009, e a API – Application Programming Interface de gráficos constitui uma dessas melhorias.

Assim, o primeiro passo para a implementação do gráfico é criar na Entidade UsuarioPessoa o atributo “salario” que será do tipo double. Desse modo gere para o atributo os métodos Getters and Setters.

private double salario;

Na página de interface com o usuário, primefaces.xhtml crie um campo para que o salário do usuário possa ser cadastrado. Utilize o p:outputLabel para identificar o campo de entrada que será do tipo p:inputText.  Se você quiser o mesmo campo poderá ser criado para a página JSF – JavaServer Faces, index.xhtml.

CHARTS BAR

Iremos criar um gráfico de barras para representar graficamente o salário dos funcionários, mostrando o nome e o salário.

No ManagedBean será preciso instanciar o objeto BarChartModel do pacote org.primefaces.model.chart do PrimeFaces para a criação do gráfico. Crie para o objeto o método Get para que estes dados possam ser obtidos pela tela e exibido para o usuário.

private BarChartModel barChartModel = new BarChartModel();

MÉTODO INIT()

No escopo do método init() um objeto ChartSeries deverá ser instanciado. O ChartSeries representa cada uma das linhas do gráfico, desse modo os dados passados representam um label para o eixo X e um valor par o eixo Y.

ChartSeries userSalario = new ChartSeries(“Salário dos usuários”);

Então um forEach irá percorrer a lista de usuários, onde para cada linha da tabela, isto é, para cada usuário serão atribuídos o seu nome e o salário correspondente.

Assim, logo após “setar” o nome do usuário e o seu respectivo salário atribuiremos o objeto do tipo ChartSeries ao Objeto BarChartModel. Ou seja, adicionaremos o grupo de usuários ao BarChartModel. E também um título ao gráfico poderá ser definido.

ADICIONANDO O GRÁFICO A TELA

Logo abaixo da tabela que exibe os dados dos usuários cadastrados, na página primefaces.xhtml, adicionaremos o gráfico na tela utilizando o componente do PrimeFaces, p:chart. No atributo type do componente informaremos o tipo do gráfico, isto é, que será um gráfico de barras. E o modelo apontará para o objeto barChartModel no ManagedBean.

EM POUCAS PALAVRAS

Mais uma vez comprovamos o poder e a facilidade de implementação dos componentes da biblioteca PrimeFaces. Provando também que ele pode ser usado tanto em aplicações simples como em aplicações complexas sem perder a simplicidade.