Problema Exportar Gráfico [Primefaces] exportChart [Nova Dúvida: Chamar widgetVar dentro do JS]

Front-end
#1

Boa tarde,

Estou com um problema para exportar um gráfico, na verdade consegui fazer funcionar perfeitamente em um outro exemplo, porém neste caso não consigo exportar, ele aparece apenas a imagem vazia sem o gráfico em imagem.

Descobri meu erro:Estou chamando o widgetVar no script porém o form não possui um ID. No caso o meu form agora possui o ID “hform”. Como faço para chamar o hform:teste (WidgetVar) dentro do script?

Segue os meus arquivos:

[code]<?xml version="1.0" encoding="UTF-8"?>

<script type="text/javascript">
       function exportChartAmp() {                 
            //export image  
            $('#output').empty().append(a.exportAsImage());  

            //show the dialog  
            dlg.show();  
       }       
</script>

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="lib/layout.css"/>
    <script type="text/javascript" src="lib/load.js"></script>
    <title>Controle por Variável</title>
</h:head>


<h:body>
    <h:form style="font-size:x-small">  

                <p:fileUpload id="fileupload" fileUploadListener="#{ControleV.importaArquivo}" widgetVar="fileupload"
                              label="Selecionar"  uploadLabel="Enviar" cancelLabel="Cancelar"
                              update="growl,graficoAmplitude" mode="advanced" style="width:800px"/>

                <p:growl id="growl" showDetail="true" life="3000"/>
    
                
                 <p:panel style="text-align:center;border-spacing:0">
                    <p:commandButton value="Exibir Gráfico" type="button" onclick="loadGraficoAmplitude()"/>
                </p:panel>
                
                
                <!--Remote Command-->
                <p:remoteCommand name="loadGraficoAmplitude"    update="PainelGraficoAmplitude">    <f:setPropertyActionListener value="#{true}" target="#{requestScope.shouldRender}" />  
                     <p:outputPanel id="PainelGraficoAmplitude" layout="block" style="margin:10px">  
                    <p:lineChart id="graficoAmplitude" value="#{ControleV.criaPlanoCartesianoAmplitude}" legendPosition="e"
                                 title="Gráfico Amplitude" rendered="#{requestScope.shouldRender}" widgetVar="a" /> 
                     </p:outputPanel>
                </p:remoteCommand>  
                
                <!--    Painel e Controle de Graficos-->
                    


        <p:commandButton type="button" value="Exportar" icon="ui-icon-extlink" onclick="exportChartAmp()"/> 
        

        <p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Imagem Gráfico">  
            <p:outputPanel id="output" layout="block" style="width:800px;height:600px"/>  
        </p:dialog>  
                
                
    </h:form>
    
</h:body>
[/code]

E o bean:


@ManagedBean(name = "ControleV")
@SessionScoped
public class ControllerV implements Serializable{
    
    private AmostraV amostra = new AmostraV();
    private ListDataModel lista;
    
    
    public void importaArquivo(FileUploadEvent evento) throws IOException{
        ConverteModVariaveis Conver = new ConverteModVariaveis();
        amostra = Conver.CriaLista(evento);
    }
    
    public DataModel getListarPontos (){
        lista = (ListDataModel) amostra.getdataModelVariaveis();
        return lista;
    }
    
    public String excluirPonto(){
        Variaveis temp = (Variaveis) lista.getRowData();
        amostra.removePontoLista(temp);
        return null;
    }
    
    public String atualizarPonto(){
        Variaveis temp = (Variaveis) lista.getRowData();
        amostra.atualizaPontoLista(lista.getRowIndex(),temp);
        return null;
    }
    
    public String clearData(){
        amostra = new AmostraV();
        return null;
    }
    
    public CartesianChartModel getCriaPlanoCartesianoMediaAmplitude(){
        return CriaGraficoV.graficoMediaAmplitude(amostra);
    }
    
    public CartesianChartModel getCriaPlanoCartesianoAmplitude(){
        return CriaGraficoV.graficoAmplitude(amostra);
    }
    
    public CartesianChartModel getCriaPlanoCartesianoDesvioPadrao(){
        return CriaGraficoV.graficoDesvioPadrao(amostra);
    }
    
    public CartesianChartModel getCriaPlanoCartesianoMediaDesvioPadrao(){
        return CriaGraficoV.graficoMediaDesvioPadrao(amostra);
    }
    
}
#2

Olá Kiwoxox,

Em primeiro lugar eu não entendi porque vc usou o <p:remoteCommand name=“loadGraficoAmplitude” , pois você poderia colocar isso direto no commandButton:

<p:panel style="text-align:center;border-spacing:0">  // Nesse caso tira o atributo type="button"
                        <p:commandButton value="Exibir Gráfico" onclick="loadGraficoAmplitude()" update="PainelGraficoAmplitude">  
                           <f:setPropertyActionListener value="#{true}" target="#{requestScope.shouldRender}" />
                        </p:commandButton>  
</p:panel>

… pode até ter algum motivo que eu não tenha visto, pois não testei o seu código.

Mas vamos lá, referente ao export Chart , eu acredito que vc tenha pegado o exemplo desse link (http://www.primefaces.org/showcase/ui/chartExport.jsf). Eu já fiz bastante coisas com chart do primefaces , mas esse export eu nunca tentei, mas posso talvez ajudar.

Uma coisa que me chamou atenção foi que vc deu o nome da WidgetVar do grafico de “a”, eu não sei se o jsf vai conseguir enxergar , pois pode ser que exista varios outros ids ou var com “a”, eu digo isso porque já tive um problema parecido. Tenta colocar um nome maior para a variável.

Outra tentativa é tentar dar um update no panel na hora de abrir o dialog, tentando colocar o atributo autoUpdate=“true” no outputPanel e tenta colocar também o atributo dynamic=“true” no dialog, mesmo não constando no showcase do primefaces

<p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Imagem Gráfico" dynamic="true"> <p:outputPanel id="output" layout="block" style="width:800px;height:600px" autoUpdate="true"/> </p:dialog>

Eu não garanto que isso vá resolver, pois como falei nunca tentei fazer isso, caso consiga, avisa como você fez para eu fazer tambem hehehe.

Qual versão do jar do primefaces você está usando, é o 3.4 ? Porque pode ser esse a causa também .

Um abraço,

Gustavo

#3

O problema e devido ao “prependId”. Utilize isso: "<h:form prependId=“false” >
Mais explicações sobre a propiedade aqui:
http://www.guj.com.br/java/241279-resolvido-ajuda-com-pdialog-do-primefaces-resolvido

depois disso utilize o exemplo do site do primefaces:

<p:lineChart value="#{chartBean.linearModel}" legendPosition=“e” zoom="true"
title=“Linear Chart” minY=“0” maxY=“10” style="width:500px;height:300px"
widgetVar=“chart”/>

<p:commandButton type=“button” value=“Export” icon=“ui-icon-extlink” onclick=“exportChart()”/>

<p:dialog widgetVar=“dlg” showEffect=“fade” modal=“true” header=“Chart as an Image”>
<p:outputPanel id=“output” layout=“block” style=“width:500px;height:300px”/>
</p:dialog>

function exportChart() { //export image $('#output').empty().append(PF('chart').exportAsImage()); //show the dialog PF('dlg').show(); } O segredo para exibicao do grafico esta na propriedade : widgetVar="chart" do "p:lineChart" e sua chamada pela funcao $('#output').empty().append(PF('chart').exportAsImage()); espero ter ajudado.
#4