title: PrimeFaces: export chart as picture
body: <p>I'm trying to export my PF chart as picture following the showcase: </p>
  
  <p><a href="http://www.primefaces.org/showcase/ui/chart/export.xhtml" rel="nofollow noreferrer">enter link description here</a></p>
  
  <pre><code>&lt;h:form id="form1"&gt;
      &lt;p:chart type="line" value="#{chartView.lineModel1}" 
               style="width:500px;height:300px" 
               widgetVar="chart"/&gt;
  
      &lt;p:commandButton type="button" 
                       value="Export" 
                       icon="ui-icon-extlink" 
                       onclick="exportChart()"/&gt;
  
      &lt;p:dialog widgetVar="dlg" 
                showEffect="fade" 
                modal="true" 
                header="Chart as an Image" 
                resizable="false"&gt;
          &lt;p:outputPanel id="output" 
                         layout="block" 
                         style="width:500px;height:300px"/&gt;
      &lt;/p:dialog&gt;
  &lt;/h:form&gt;
  &lt;script type="text/javascript"&gt;
      function exportChart() {
          //export image
          $('#output').empty().append(PF('chart').exportAsImage());
  
          //show the dialog
          PF('dlg').show();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But the popup window is blank:</p>
  
  <p><img src="https://i.stack.imgur.com/fq01K.jpg" alt="enter image description here"></p>
  
  <p>I'm using <strong>PF v5.1</strong> but I've tried both the approaches:</p>
  
  <p>for <strong>PF v3.5</strong> or older:</p>
  
  <pre><code>$('#output').empty().append(chart.exportAsImage()); dlg.show();  
  </code></pre>
  
  <p>for <strong>PF v4.0</strong> or newer : </p>
  
  <pre><code>$('#output').empty().append(PF('chart').exportAsImage()); PF('dlg').show();
  </code></pre>
  
  <p>What I'm doing wrong?</p>