Primefaces piechart export button not working properly

Question

I want to export my primefaces piechart as an image, and I followed Primefaces Showcase for doing so. The problem is when I click the export button, the window freezes and the chart is not exported as an image, hence I cannot right click and save it. I have tried the solutions given in PrimeFaces: export chart as picture and .Cannot export chart as image in Primefaces? but could not solve my problem. Below is my code:

    <p:panelGrid id="subPanelGrid" columns="1" style="width:100%" layout="grid">
    <table style="width: 50%;">
        <tr>
            <td><p:column>
                    <div dir="ltr" class="chartContainer">
                        <p:chart type="pie" model="#{myExample.myPieChart}" style="width:600px;height:340px" 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" resizable="false">
                            <p:outputPanel id="output" layout="block" style="width:600px;height:340px" />
                        </p:dialog>
                    </div>
                </p:column></td>
        </tr>
    </table>
</p:panelGrid>

And here is my script:

<script type="text/javascript">
                function exportChart() {
                    $('#output').empty()
                            .append(PF('chart').exportAsImage());
                    PF('dlg').show();
                }
            </script>

Thank you in advanced.

Answer 1

Yes this is a recurrent problem with primefaces... If your are using primefaces 5 or +, you can try (as your grid is not in a form)

function exportChart() {
  $('#output').empty().append(chart.exportAsImage());
  dlg.show();
}

It exists other ways as described here PrimeFaces: export chart as picture

---

Consider trying the following, according to @CycDemo (I have not tried it but people seem to have upVote it):

Download jquery.js and html2canvas.js. If you are using maven just add to your pom.xml in your dependecies:

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>html2canvas</artifactId>
  <version>0.4.1</version>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>2.1.4</version>
</dependency>

Then in your .xhtml

<h:head>
    <h:outputScript library="primefaces" name="#{request.contextPath}/js/jquery.min.js"/>
    <script type="text/javascript" src="#{request.contextPath}/js/html2canvas.js"></script>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
</h:head>
<h:body>
    <h:form id="imageFrom">
        <script type="text/javascript">
            function saveAsImage() { 
                html2canvas($("#imageFrom\\:barChart"), {
                    onrendered: function(canvas) {
                        theCanvas = canvas;
                        document.body.appendChild(canvas);
                        $("#imageFrom\\:output").append(canvas);
                    }
                });
            }
        </script>
        <p:chart type="bar" id="barChart" model="#{chartView.barModel}" style="width:500px;height:300px;"/>     
        <p:commandButton id="btnSave" value="Export" onclick="saveAsImage();PF('eventDialog').show();"/>
        <p:dialog id="eventDialog" widgetVar="eventDialog" resizable="false" width="520" height="300" appendToBody="true">
            <p:outputPanel id="output"/>
        </p:dialog>
    </h:form>
</h:body>

Hope it will help :)