Bom dia pessoal,
estou desenvolvendo uma aplicação com primefaces 2.0.0 e jsf 2.0, e não consigo exibir os gráficos na página… Embaixo está o código:
<p:columnChart value="#{estatisticaController.vetor}" var="maquina"
xfield="#{maquina.custoHora}" width="100%" height="210px">
<p:chartSeries label="Produtos" value="#{maquina.descricao}"/>
No Controller está assim:
public List getVetor(){
List<Maquina> vetor = new ArrayList<Maquina>();
Maquina m1 = new Maquina();
m1.setCustoHora(new BigDecimal(10));
m1.setDescricao("Trator 1");
Maquina m2 = new Maquina();
m2.setCustoHora(new BigDecimal(10));
m2.setDescricao("Trator 2");
Maquina m3 = new Maquina();
m3.setCustoHora (new BigDecimal(10));
m3.setDescricao("Trator 3");
vetor.add (m1);
vetor.add (m2);
vetor.add (m3);
return vetor;
}
No painel onde deveria estar o gráfico não aparece nada, e dá null pointer exception no console. Alguém sabe o que pode ser?
Já consegui, foi só colocar no style=“chartStyle” e adicionar no cabeçalho na página o código:
<script type="text/javascript">
var chartStyle = {
padding:20,
legend: {
display:"right",
spacing:10
}
};
</script>
Laura ,
Desta forma vc conseguiu exibir a legenda do grafico com esta variavel javascript? No meu caso o grafico funciona perfeitamente, porém quando insiro a variavel na tag style não funciona. *não existe referencia dessa váriavel na tag.
obrigado
Guilherme
Olá Guilherme,
a legenda é exibida normalmente, com a inserção do codigo javascript do post anterior e de acordo com a referencia ao elemento primefaces abaixo:
<p:pieChart id="custoOpDia" value="#{estatisticaController.vetor}" var="maquina"
categoryField="#{maquina.descricao}" dataField="#{maquina.custoHora}"
refreshInterval="5000" height="210px" width="300px" style="chartStyle" live="true"/>
Olá Laura,
Não consegui faz funcionar a legenda quando utilizo a tag style conforme vc especificou. Estou usando JSF2.0 e primefaces 2.0.2
Segue o codigo,
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="../layout/template.xhtml">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Vendas </title>
<script type="text/javascript">
var chartStyle = {
padding:20,
legend: {
display:"right",
spacing:10
}
};
</script>
</h:head>
<ui:define name="box">
<h4 class="yellow">Calendario</h4>
<ui:insert name="box-container2">
<div class="box-container2">
<table>
<td><p:calendar styleClass="calendario" mode="inline" close="false"/></td>
</table>
</div>
</ui:insert>
</ui:define>
<ui:define name="mid-col">
<div class="box">
<h4 class="white">Metas</h4>
<div class="box-container">
<p:barChart height="350px" styleClass="grafico" value="#{dados.dados}" var="x" yfield="#{x.funcionario}">
<p:chartSeries label="Meta" value="#{x.valorA}"/>
<p:chartSeries label="Venda atingida" value="#{x.valorB}"/>
</p:barChart>
</div>
</div>
<div class="box">
<h4 class="white">Estatistica de vendas</h4>
<div class="box-container">
<p:pieChart height="250px" styleClass="grafico" value="#{chartBean.sales}" var="sale" categoryField="#{sale.brand}" dataField="#{sale.amount}" live="true" style="chartStyle" />
</div>
</div>
</ui:define>
</ui:composition>
obrigado
Guilherme
Olá Guilherme,
um pequeno detalhe é o atributo live=“true” do <p:piechart>… faça um teste retirando-o… acredito que vá funcionar.
Eu costumo dizer na empresa que os atributos do prime têm vida própria!
qualquer coisa posta ae o resultado!
[]s
Ola Laura,
Tinha antes feito o teste, refiz e não funcionou… teria como vc postar o arquivo .xhtml do seu projeto …
*OBS: a IDE reclama neste campo dizendo que não é possivel localizar a referencia da variavel javascript, está correta a desclaração do sript no cabeçalho?
obrigado
Guilherme
Pelo que vi a declaração do javascript em sua página deve estar no template também, ao inves de estar na página que é exibido o gráfico.
Esta é a parte do cabeçalho de todas as páginas, que neste caso é invocado por <ui:composition template="…/template.xhtml"> na segunda parte do código.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
<title>Olá! </title>
<script type="text/javascript">
var chartStyle = {
padding:20,
legend: {
display:"right",
spacing:10
}
};
</script>
</h:head>
<h:body>
</h:body>
</html>
Esta é a página de exibição do gráfico com a respectiva legenda.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<ui:composition template="../template.xhtml">
<ui:define name="body" >
<h:form>
<p:panel header="Fontes de custo" widgetVar="panel">
<p:pieChart id="custoOpAno" value="#{estatisticaController.vetor}" var="maquina"
categoryField="#{maquina.descricao}" dataField="#{maquina.custoHora}"
refreshInterval="5000" height="210px" width="300px" live="true" style="chartStyle"/>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</f:view>
</html>
Espero ter ajudado e desculpe a demora.
Olá laura, funcionou … fiz realmente o mesmo procedimento… obrigado
Guilherme
QUe bom que funcionou!
Sempre às ordens Guilherme.
[]s