* Visite o ALJUG - http://aljug.blogspot.com - Noticias sobre a comunidade java alagoana e do mundo * Visite o blog Mundo Gamificado www.mundogamificado.com.br - E vamos mudar o mundo! *

sábado, 13 de junho de 2015

Gráficos[Charts] Primefaces com JSF/Hibernate

Olá pessoal.

Estamos de volta e agora para atualizar um post antigo meu quando eu falei sobre o pieChart com hibernate.

O que me motivou esse post foi a Cláudia que devido ao post antigo entrou em contato comigo e pediu uma ajuda com o código dela, com isso decidir fazer um exemplo funcionando para todos terem como referência, pois eu fiquei sem entender no manual do usuário e também no showcase, pois em uma mostra um exemplo e no showcase mostra com outro exemplo. 

Neste exemplo estou usando a versão 5.2 do primefaces, todo código está no bitbucket.

Eu criei duas classes:
1. Info que pode ser alguma dado para fazer de referência, como ,por exemplo, o dólar que sempre tem uma variação a cada dia.
2 . InfoValores que seria uma classe para registrar a variação da referencia cadastrada, neste caso como estamos falando do dólar, com isso temos que cadastrar a data e o valor.

Para este exemplo vamos usar o tipo LineChart, para isso vamos criar o método para inicializar o gráfico como o código abaixo:

 
private LineChartModel linearModel;//Declarando a varivel

/**
* Método de Inicialização
*/
public LineChartModel  initLineModel(){
 
 linearModel = new LineChartModel();
 
 LineChartSeries series1 = new LineChartSeries();
       //Serie1 é a linha que será os dados para demonstração do gráfico
 List<InfoValores> dados = getListaDeValores();
 series1.setLabel("Dollar");
 
 for (int x=0;x < dados.size();x++ ){
  series1.set(dados.get(x).getDatacadastro(),dados.get(x).getValorinfo());
 }
 //Aqui é o mais importante, quando você diz que os dados atribuídos 
        //deverão aparecer no gráfico
       linearModel.addSeries(series1);
       linearModel.setZoom(true);
       linearModel.getAxis(AxisType.Y).setLabel("Dólar");
 /** Adicionando o formato de informações do tipo data ao eixo X 
  * da Classe Axis.
  */
 DateAxis axis = new DateAxis("Datas");
        axis.setMin(menorData.toString());
       /**
  * O set Tick FOrmat é o formato que vai aparece no gráfico, 
            neste caso é o brasilseiro
  * e pode ser encontrado em http://www.jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html
  */
 axis.setTickFormat("%#d %#m %Y");
 linearModel.getAxes().put(AxisType.X,axis);
 
 return linearModel;
 
}
Depois deveremos informar ao código que a incialização deverá ser atribuido a variavel que vai ser atribuido na view como no código abaixo:

public void createLineModels(){
        //A variavél recebe a inicialização
 linearModel = initLineModel();
        linearModel.setTitle("Variação do Dollar");
        linearModel.setLegendPosition("e");
        Axis yAxis = linearModel.getAxis(AxisType.Y);
        Axis xAxis = linearModel.getAxis(AxisType.X);
}


Para que funcione devemos informar ao ciclo do JSF que depois de construir incialize o gráfico como no código abaixo:
  @PostConstruct
     public void init() {
         createLineModels();
     }

Já na página XHTML você declara da mesma forma que está no showcase do Primefaces:

<p:chart type="line" model="#{infoValoresController.linearModel}" style="height:300px;"/>



View:



Então Pessoal, fica atento no bitbucket que estarei atualizando para aprimorar cada vez mais o código, qualquer dúvida é só da o feedback deste post. Até a próxima!