Gráfico zerado primesFaces

Programação Java
#1

Tela com pesquisa e Gráfico
`<ui:composition xmlns=“http://www.w3.org/1999/xhtml”
xmlns:h=“http://xmlns.jcp.org/jsf/html”
xmlns:f=“http://xmlns.jcp.org/jsf/core”
xmlns:ui=“http://xmlns.jcp.org/jsf/facelets”
xmlns:p=“http://primefaces.org/ui”
template="/WEB-INF/templates/Layout.xhtml">

<ui:define name="content">
	<h1 class="aw-page-title">Pesquisa SOS</h1>
	
	<h:head>
	
		<script>
			PrimeFaces.locales['pt_BR'] = {
			closeText : 'Fechar',
			prevText : 'Anterior',
			nextText : 'Próximo',
			currentText : 'Começo',
			monthNames : [ 'Janeiro', 'Fevereiro', 'Março', 'Abril','Maio', 'Junho', 'Julho', 'Agosto', 'Setembro','Outubro', 'Novembro', 'Dezembro' ],
			monthNamesShort : [ 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun','Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez' ],
			dayNames : [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta','Sexta', 'Sábado' ],
			dayNamesShort : [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex','Sáb' ],
			dayNamesMin : [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ],
			weekHeader : 'Semana',
			firstDay : 1,
			isRTL : false,
			showMonthAfterYear : false,
			yearSuffix : '',
			timeOnlyTitle : 'Só Horas',
			timeText : 'Tempo',
			hourText : 'Hora',
			minuteText : 'Minuto',
			secondText : 'Segundo',
			currentText : 'Data Atual',
			ampm : false,
			month : 'Mês',
			week : 'Semana',
			day : 'Dia',
			allDayText : 'Todo Dia'
		};
		</script>
	
	</h:head>

	<h:form id="frm">

		<p:toolbar>
			<p:toolbarGroup>
				<p:commandButton id="pesq" value="Pesquisar"
					action="#{controleSos.pesquisaSos}" update="@form" />
			</p:toolbarGroup>
		</p:toolbar>


		<p:messages autoUpdate="false" />

		<div class="ui-fluid">
			<p:panelGrid columns="4" layout="grid"
				style="margin-top: 20px; margin-bottom: 40px"
				styleClass="panelgrid-noborder"
				columnClasses="ui-grid-col-1, ui-grid-col-4, ui-grid-col-1, ui-grid-col-4">


				<p:outputLabel value="Setor" for="idSetores" />
				<p:selectOneMenu id="idSetores"
					value="#{controleSos.pesquisaSos.sSetor}">
					<f:selectItem itemLabel="Selecione" itemValue="" />
					<f:selectItem itemLabel="TODOS" itemValue="todos" />
					<f:selectItems value="#{controleSos.selectItenSetores}" />
				</p:selectOneMenu>

				<p:outputLabel value="Tipo Pesquisa" for="idTipo" />
				<p:selectOneMenu id="idTipo"
					value="#{controleSos.pesquisaSos.sTipoPesquisa}">
					<f:selectItem itemLabel="Selecione" itemValue="" />
					<f:selectItem itemLabel="TODOS" itemValue="todos" />
					<f:selectItem itemLabel="NC" itemValue="nc" />
					<f:selectItem itemLabel="AC" itemValue="ac" />
				</p:selectOneMenu>

				<p:outputLabel value="Data Início" for="idDtaIni" />
				<p:calendar id="idDtaIni" pattern="dd/MM/yyyy" value="#{controleSos.pesquisaSos.sDataInicial}" locale="pt_BR" />


				<p:outputLabel value="Data Final" for="idDtaFim" />
				<p:calendar id="idDtaFim" pattern="dd/MM/yyyy" value="#{controleSos.pesquisaSos.sDataFinal}" locale="pt_BR"/>


			</p:panelGrid>
		</div>


		<p:dataTable id="tbl" var="sos" value="#{controleSos.listSos}"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
			paginator="true" rows="5" style="margin-bottom:20px">

			<f:facet name="{Exporters}">
				<h:commandLink>
					<p:graphicImage name="gestaosos/images/excel.png" width="24" />
					<p:dataExporter type="xls" target="tbl" fileName="listSos" />
				</h:commandLink>

				<h:commandLink>
					<p:graphicImage name="gestaosos/images/pdf.png" width="24" />
					<p:dataExporter type="pdf" target="tbl" fileName="listSos" />
				</h:commandLink>

			</f:facet>

			<p:column width="3%">
				<f:facet name="header">
					<h:outputText value="SOS" style="font-size:10px;color:Brown;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sSolic}" style="font-size:12px;" />
			</p:column>

			<p:column width="3%">
				<f:facet name="header">
					<h:outputText value="SETOR" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sSetor}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="ROTINA" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sRotina}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="DATA DE ABERTURA" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sDataAbertura}" style="font-size:12px;" />
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="HORA DE ABERTURA" style="font-size:10px;color:Brown;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sHoraAbertura}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="PRAZO DATA REAL" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sPrazoDataReal}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="PRAZO HORA REAL" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sPrazoHoraReal}" style="font-size:12px;"/>
			</p:column>

			<p:column width="8%">
				<f:facet name="header">
					<h:outputText value="DATA DE ENCERRAMENTO" style="font-size:10px;color:Brown;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sDataEncerramento}" style="font-size:12px;"/>
			</p:column>

			<p:column width="8%"  >
				<f:facet name="header">
					<h:outputText value="HORA DE ENCERRAMENTO" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sHoraEncerramento}" style="font-size:12px;" />
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="RESPONSAVEL" style="font-size:10px;color:Brown;font-weight:bold"  />
				</f:facet>
				<h:outputText value="#{sos.sResponsavel}" style="font-size:12px;" />
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="STATUS" style="font-size:14px;color:green;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sLabelStatus}" rendered="#{sos.sStatus eq '1'}" style="color:green;font-weight:bold;font-size:10px" />
				<h:outputText value="#{sos.sLabelStatus}" rendered="#{sos.sStatus eq '2'}" style="color:red;font-weight:bold;font-size:10px" />
			</p:column>
		</p:dataTable>			
	</h:form>



			<h:panelGroup id="idGrafico" layout="block" styleClass="ui-fluid">
					  <h:panelGrid columns="2" columnClasses="left,right" style="width:100%">
			              <p:chart type="bar" model="#{chartView.animatedModel2}" style="width:1000px" responsive="true"/>
				      </h:panelGrid>
			</h:panelGroup>
	
	
		
			


</ui:define>

</ui:composition>`

Controle da pesquisa:
`package com.montreal.gestaosos.controller;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.model.SelectItem;
import javax.faces.view.ViewScoped;
import javax.inject.Inject;
import javax.inject.Named;

import com.montreal.gestaosos.excecoes.DaoException;
import com.montreal.gestaosos.model.PesquisaSOS;
import com.montreal.gestaosos.model.RelatorioSos;
import com.montreal.gestaosos.model.Setores;
import com.montreal.gestaosos.service.GestaoSos;
import com.montreal.gestaosos.uteis.Parametros;

/**

  • Gerenciador de tarefas

  • @author Douglas Dias

  • @return lista de setores, lista de sos

  • @throws DaoException
    */
    @Named
    @ViewScoped
    public class ControleSos extends Parametros implements Serializable {

    private static final long serialVersionUID = 1L;

    @Inject
    private GestaoSos gestaoSos;

    private List listSos = new ArrayList();
    private List listSetores = new ArrayList();

    private static List selectItensSetores;

    private Setores setores = new Setores();

    private RelatorioSos relatorioSos = new RelatorioSos();
    private PesquisaSOS pesquisaSos = new PesquisaSOS();

    private FacesMessage msg = null;

    public static void main(String[] args) {
    ControleSos sos = new ControleSos();
    sos.getSelectItenSetores();
    }

    /**

    • Responsavel por recuperar setores para pequisa

    • @return lista de setores

    • @throws DaoException
      */
      public List getSelectItenSetores() {

      if (selectItensSetores == null) {
      selectItensSetores = new ArrayList();

       for (Setores s : buscaSetores() ) {
 	selectItensSetores.add(new SelectItem(s.getSetor(), s.getSetor() + " - " + s.getNome()));
 }

      }
      return selectItensSetores;
      }

    /**

    • Responsável por pesquisar sos referente à setores pesquisados

    */
    public void pesquisaSos() {

     try {
 	
 	listSos = gestaoSos.sPesquisaSos(pesquisaSos);
 	
 	
 	if(listSos.size() == 0){
 	msg = new FacesMessage("Não existem SOS's nesse periodo.");
 	}else {
 	msg = new FacesMessage("SOS's Retornadas com sucesso!");	
 	}
 	FacesContext.getCurrentInstance().addMessage(null, msg);
 	
 } catch (DaoException e) {
 	this.addLog("[ERRO AO RECUPERAR PESQUISA DE SOS, COM ERRO: ]", e);
 }

    }

    public List buscaSetores() {

     try {

 	listSetores = gestaoSos.sPesquisaSetores();
 	
 	if(listSetores.size() == 0){
 	msg = new FacesMessage("Pesquisa não retornou lista de setores");
 	FacesContext.getCurrentInstance().addMessage(null, msg);
 	}
 	
 	
 } catch (DaoException e) {
 	this.addLog("[ERRO AO RECUPERAR SETORES, COM ERRO: ]", e);
 }

 return listSetores;

    }

    public Setores getSetores() {
    return setores;
    }

    public void setSetores(Setores setores) {
    this.setores = setores;
    }

    public RelatorioSos getRelatorioSos() {
    return relatorioSos;
    }

    public void setRelatorioSos(RelatorioSos relatorioSos) {
    this.relatorioSos = relatorioSos;
    }

    public PesquisaSOS getPesquisaSos() {
    return pesquisaSos;
    }

    public void setPesquisaSos(PesquisaSOS pesquisaSos) {
    this.pesquisaSos = pesquisaSos;
    }

    public List getlistSetores() {
    return listSetores;
    }

    public List getselectItensSetores() {
    return listSetores;
    }

    public List getlistSos() {
    return listSos;
    }
    }
    `

Controle da Geração do gráfico:
`package com.montreal.gestaosos.controller;

import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;

import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.BarChartModel;
import org.primefaces.model.chart.ChartSeries;

import com.montreal.gestaosos.model.GeraGrafico;
import com.montreal.gestaosos.uteis.Parametros;

@ManagedBean
public class ChartView extends Parametros implements Serializable {

private static final long serialVersionUID = 1L;

private BarChartModel animatedModel2;
private HashMap<String, GeraGrafico> mpaGrafico = new HashMap<String, GeraGrafico>();
private GeraGrafico objGrafico = new GeraGrafico();

public void recebeInfGrafico(HashMap<String, GeraGrafico> mpaGrafico, GeraGrafico objGrafico) {
	this.mpaGrafico = mpaGrafico;
	this.objGrafico = objGrafico;
}

@PostConstruct
public void init() {
	createAnimatedModels();
}

public BarChartModel getAnimatedModel2() {
	return animatedModel2;
}

private void createAnimatedModels() {
	
	animatedModel2 = initBarModel(mpaGrafico);
	animatedModel2.setTitle(objGrafico.getDataPesquisa());
	animatedModel2.setAnimate(true);
	animatedModel2.setLegendPosition("ne");
	Axis yAxis = animatedModel2.getAxis(AxisType.Y);
	yAxis.setMin(0);
	yAxis.setMax(30);
	
}

private BarChartModel initBarModel(HashMap<String, GeraGrafico> mpaGrafico) {
	BarChartModel model = new BarChartModel();

	if (mpaGrafico.size() != 0) {

		for (Map.Entry<String, GeraGrafico> itemGrafico : mpaGrafico.entrySet()) {

			GeraGrafico objGrafico = new GeraGrafico();
			objGrafico.setQtdetotalSos(itemGrafico.getValue().getQtdeDentroPrazo() + itemGrafico.getValue().getQtdeForaPrazo());
			objGrafico.setQtdeDentroPrazo(itemGrafico.getValue().getQtdeDentroPrazo());
			objGrafico.setQtdeForaPrazo(itemGrafico.getValue().getQtdeForaPrazo());
			objGrafico.calularPorcentagem(objGrafico);

			ChartSeries setores = new ChartSeries();
			setores.setLabel("Setor: " + itemGrafico.getValue().getSetor());
			setores.set(FPRAZO, objGrafico.getPorcentagemForaPrazo());

			model.addSeries(setores);

		}

	} else {
		
		ChartSeries setores = new ChartSeries();
		setores.setLabel("Setor: teste " );
		setores.set(FPRAZO, 10);

		model.addSeries(setores);
		
	}
	return model;
}

}`

No dao faço faço a pesquisa e faço o tratamento para selecionar as informações para mandar pro gráfico.
as informações vão certinha para o controlador do gráfico só que de lá não monta o gráfico fica o inicial
` objGrafico = mpaGrafico.get(objGrafico);

			if (objGrafico == null) {

				objGrafico = geraGrafico(objRelatorioSos);

				if (objGrafico != null) {
					mpaGrafico.put(objRelatorioSos.getsSetor(), objGrafico);
				}

			}

			listaSos.add(objRelatorioSos);
		}
		
		
		controleGrafico.recebeInfGrafico(mpaGrafico, retonarDataPesquisa(objPesquisa, objGrafico));
		controleGrafico.init();
		`

segundaTela-1.JPG1169×375 36.1 KB

segundaTela.JPG1197×598 54.2 KB

primeiraTela.JPG1083×623 40.8 KB

Layout:
`

<h:head>
<f:facet name=“first”>


</f:facet>

<title>Relatório SOS</title>

<h:outputStylesheet library="gestaosos" name="styles/custom.css" />
<h:outputStylesheet library="gestaosos" name="styles/layout.css" />
<h:outputStylesheet library="gestaosos" name="styles/components.css" />

<h:outputScript target="body" library="primefaces" name="jquery/jquery.js" />
<h:outputScript target="body" library="gestaosos" name="javascripts/app.js" />

</h:head>

<h:body>

<header class="aw-topbar">
	<h:graphicImage library="gestaosos" name="images/logo.png" />
	
	<a href="#" class="aw-toggle  js-toggle"><i class="fa  fa-bars"></i></a>
</header>

<aside class="aw-sidebar  js-sidebar">
	<ui:include src="Menu.xhtml" />
</aside>

<section class="aw-content  js-content">
	<ui:insert name="content" />
</section>

</h:body>

`

Menu:
`<ui:composition xmlns=“http://www.w3.org/1999/xhtml”
xmlns:ui=“http://xmlns.jcp.org/jsf/facelets”
xmlns:h=“http://xmlns.jcp.org/jsf/html”>

<nav class="aw-menu">
	<ul>
		<li class="is-selected">
			<h:link><i class="fa  fa-fw  fa-file-text"></i>Gestão SOS</h:link>
		</li>
	</ul>
</nav>

</ui:composition>`

components: CSS

`/* TOGGLE */
.aw-toggle {
float: right;
line-height: 50px;
margin-right: 15px;

color: #fff;

}

/* MENU */
.aw-menu {
font-size: 1.1em;
}

.aw-menu > ul {
margin: 0;
padding: 0;
list-style: none;
}

.aw-menu > ul a {
display: block;
padding: 10px 15px;

text-decoration: none;
font-weight: 500;
color: #373737;

}

.aw-menu > ul i {
margin-right: 6px;
}

.aw-menu > ul a:hover, .aw-menu > ul a:focus {
background-color: #dfdfdf;
}

.aw-menu > ul .is-selected {
border-left: 3px solid #1e94d2;
background-color: #f3f3f3;
}

.aw-menu > ul .is-selected a {
margin-left: -3px;
color: #1e94d2;
}

/* PAGE-TITLE */
.aw-page-title {
margin: 0;
padding: 20px 0;

font-size: 1.5em;
color: #373737;

}`

custom CSS:
`/* BASE */
body {
margin: 0;
font-size: 13px;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

/* TABVIEW */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
color: #555;
}

@media (max-width: 640px) {
.ui-tabs.ui-tabs-top > .ui-tabs-nav li {
width: 100%;
}
}

/* PANELGRID */
.ui-panelgrid.panelgrid-noborder .ui-grid-responsive {
border: none;
}

@media (max-width: 640px) {
.ui-panelgrid.panelgrid-noborder .ui-grid-responsive .ui-grid-row {
border: none;
}
}`

layout CSS:
`/* TOPBAR */
.aw-topbar {
position: fixed;
top: 0;
right: 0;
left: 0;
min-height: 50px;
z-index: 9999;

background-color: #f44d11;

}

.aw-topbar > img {
margin-top: 10px;
margin-left: 5px;
}

/* SIDEBAR */
.aw-sidebar {
position: fixed;
top: 50px;
bottom: 0;
left: 0;
width: 210px;
margin-left: -211px;
z-index: 9998;
transition: margin-left 0.5s;
overflow-y: auto;

background-color: #f6f6f6;
border-right: 1px solid #eaeaea;

}

.aw-sidebar.is-toggled {
margin-left: 0px;
}

@media (min-width: 960px) {
.aw-sidebar {
margin-left: 0px;
}

.aw-sidebar.is-toggled {
	margin-left: -211px;
}

}

/* CONTENT */
.aw-content {
padding: 0 15px;
margin-top: 50px;
transition: margin-left 0.5s;
}

@media (min-width: 960px) {
.aw-content {
margin-left: 210px;
}

.aw-content.is-toggled {
	margin-left: 0;
}

}`

#2

Ola Douglas_Dias,

você postar o .xhtml para podermos ver como você esta utilizando?

#3

postei lá aix, se puder dar um força

#4

Eu não entendi algumas coisas, vamos la:

esta chamada de método animatedModel2 = initBarModel(mpaGrafico); de onde vem, este initBarModel com o mapa de graficos? é da parametros que você herda?

Pois eu penso que o correto seria invocar initBarModel(HashMap<String, GeraGrafico> mpaGrafico)

ex:

Eu deixaria o método private void createAnimatedModels() como public e adicionaria um id em p:chart atualizando o gráfico e não toda a tela com @form, na view eu faria + ou - assim:

<p:commandButton id="grafico" value="Gráficos" icon="ui-icon-extlink" update="frm:reportGraph"
					 actionListener="#{chartView.createAnimatedModels()}"   />

<p:chart id="reportGraph" type="bar" model="#{chartView.animatedModel2}" responsive="true"/>

#5

Aix, na verdade esse botão <p:commandButton id="grafico" value="Gráficos" icon="ui-icon-extlink" update="@form" actionListener="#{chartView.init}" oncomplete="PF('itemGrafico').show()" />

era só um teste que tava fazendo para gerar o gráfico apertando esse só que vi que teria que fazer a pesquisa duas vezes.

o gráfico ta na tela inicial quando carrego a primeira vez não mostra nda pois ainda não foi feita a pesquisa mais quando seleciono as informações para gera a tabela com essas informações gero o gráfico, e a informação para a geração até vão certas só que não carrega o gráfico novamente
vou postar as classe pro seu entendimento melhor

#6

Sua ChartView esta em um scopo de @Request e usa o @ManageBean do JSF enquanto que o resto da aplicação utiliza o CDI(@Named) , faça um teste por favor tira esse ManageBean e adiciona o @Named e anota esse ChartView com @ViewScoped e me como ficou.

#7

aix, não funcionou deu a mesma coisa, o gráfico não recarregou o que acho estranho que a tabela carrega normalmente.
e uma coisa que percebi no final quando eu chamo a classe para monta o gráfico ela monta todas as informações

#8

Brothe desculpe não ter respondido ontem mas meu note estragou o teclado, olha só se os dados estão certo indo para o componente veja com o firebug se eles estão la na view e se não é alguma propriedade do CSS que esta impedindo a visualização, testa também o update do primefaces se esta mesmo atualizando esse gráfico, notei que tem um id no panelGroup do grafico se ele não é utilziado retira ele ou então passa la no update todo o caminho do componente a ser atualizado, se não rolar me fala vou vou montar um teste aqui, abração.

#9

vou testar aki

#10

não sei se pode ter alguma coisa haver mais estou usando um layout (Templantes) que ganhei do curso
vou postar eles para ver se eles

#11

ai na impressa não consigo instalar o firefox e o debug do Chrome não pega nenhum irregularidade

#12

Capturar.JPG1024×558 97.7 KB

é isso que aparece quando debug, perdoa minha ignorância mais não sei interpretar isso

#13

ola Douglas,

não esqueci de você manu, meu note esta com problemas no teclado recem hoje consegui um emprestado mas quanto ao seu problema pode ser sim o template que faz não renderizar o seu gráfico, o que poso dizer é que tenho um software que utiliza do mesmo gráfico e funciona bem, então eu recomendo você testar criando um outro projeto e criando só a tela com o grafico sem esses CSS’s que ganhou no curso tudo do mais simples possível quem sabe assim não funciona e você consiga identificar o problema no seu software, se não quiser criar outra app então reitre o _template da renderização desta tela para ver se tem resultados, abração.

#14

e ai velho, conseguimos resolver aqui, finalmente
analisando mais afundo reparei que o gráfico gerava uma vez e depois ele entrava no método novamente e montava o gráfico vazio mudei o método de geração e funcionou perfeitamente.
muitoooo obrigado pela ajuda.

#15

que bom que resolveu manu, abração,