Primefaces - Graficos

1 de junho de 2010 9 respostas

lauraalvess 1 de junho de 2010

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?

9 Respostas

lauraalvess 2 de jun. de 2010

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>

guilhermemach 3 de jul. de 2010

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

lauraalvess 7 de jul. de 2010

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"/>

guilhermemach 9 de jul. de 2010

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

lauraalvess 15 de jul. de 2010

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

guilhermemach 20 de jul. de 2010

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

lauraalvess 4 de ago. de 2010

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.

guilhermemach 5 de ago. de 2010

Olá laura, funcionou … fiz realmente o mesmo procedimento… obrigado
Guilherme

lauraalvess 6 de ago. de 2010

QUe bom que funcionou!
Sempre às ordens Guilherme.

[]s

Criado 1 de junho de 2010

Ultima resposta 6 de ago. de 2010

Respostas 9

Participantes 2

9 Respostas

Topicos relacionados