Primefaces chart in Export PDF

Question

First of all i have to tell you that I am not an English native speaker so I hope i will explain you correctly my issue.

I have some problems with exporting my bar chart in PDF. I am working with PrimeFaces 3.5 and Tomcat v7.

After some resarch, I learned that, it is not possible to export directly a chart in PDF. But it seem to be some way to save the chart in an image like png or jpeg.

I found this : http://www.primefaces.org/showcase-labs/ui/chartExport.jsf but it's only a print screen way and i want to save it for use it in my pdf report .

I also see the JFreeChart solution but i really want to keep the same chart in my html page and in my PDF report.

Here is my code :

<h:form id="finalreport">
            <c:if test="#{treeBean.finalPrintReport.create == 1}">
                <h1>
                    <h:outputText value="#{treeBean.finalPrintReport.namefinalreport}"
                        escape="false" />
                </h1>
                <p:dataTable id="dataTableReport" var="row"
                    value="#{treeBean.finalPrintReport.allData}" paginator="true"
                    rows="10">
                    <p:columns value="#{treeBean.finalPrintReport.column}" var="column"
                        columnIndexVar="colIndex">
                        <f:facet name="header">
                            <h:outputText value="#{column}" />
                        </f:facet>

            <h:outputText value="#{row[colIndex]}" />
                    </p:columns>
                </p:dataTable>
                <br />

                <h:commandLink>
                    <p:graphicImage value="/images/pdf.png" />
                    <p:dataExporter type="pdf" target="dataTableReport"
                        fileName="Report" preProcessor="#{treeBean.createPDF}" />
                </h:commandLink>
            </c:if>
        </h:form>
        <!-- Graph -->
        <h:form id="graph">
            <c:if test="#{treeBean.finalPrintReport.create == 1}">
                <c:if test="#{treeBean.finalPrintReport.propertyOfFinalReport.graph == true}">
                    <p:barChart id="basic" value="#{treeBean.chartbar2d}"
                        legendPosition="ne" title="Basic Bar Chart" 
                        style="height:300px" />
                </c:if> 
            </c:if>
        </h:form>

Thanks

Check out this tutorial: blog.hatemalimam.com/export-primefaces-charts-to-pdf — Hatem Alimam

Marcelo Loureiro Marcelo Loureiro · Accepted Answer · 2015-03-30T18:44:18

I don't know if is the best way to solve this, but I usually get the src attribute of the image exported from the chart and I send back to Managed Bean. There you can create a new Image and export using your favorite way to do this.

Example:

in your MB

/** String Base64 that represents the image bytes */
private String chartImageSrcBase64;

Page

<h:inputHidden id="chartImageSrc" 
               value="#{myMB.chartImageSrcBase64}" />

<p:remoteCommand name="exportToPdfRemoteCommand" 
                 action="#{myMB.exportPdf}">

<p:commandButton type="button" 
                 value="Export to PDF"  
                 onclick="exportToPdf()"/>

exportToPdf() is a custom JS function in your page

function exportToPdf() {
    //get your image 
    var imageElement = PF('chart').exportAsImage();

    //get the value of the 'src' attribute of this object and fill the hidden input
    $("#yourForm\\:chartImageSrc").val($(imageElement).attr("src"));

    //send the image (converted in text) to your MB
    exportToPdfRemoteCommand(); 
}

Once in the server, you can convert again the text based image in a real image and use your favorite way to build a PDF document.

Primefaces chart in Export PDF

2 Answers