PrimeFaces: export the graphic as a picture

advertisements

I'm trying to export my PF chart as picture following the showcase:

enter link description here

<h:form id="form1">
    <p:chart type="line" value="#{chartView.lineModel1}"
             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"
              resizable="false">
        <p:outputPanel id="output"
                       layout="block"
                       style="width:500px;height:300px"/>
    </p:dialog>
</h:form>
<script type="text/javascript">
    function exportChart() {
        //export image
        $('#output').empty().append(PF('chart').exportAsImage());

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

But the popup window is blank:

I'm using PF v5.1 but I've tried both the approaches:

for PF v3.5 or older:

$('#output').empty().append(chart.exportAsImage()); dlg.show();

for PF v4.0 or newer :

$('#output').empty().append(PF('chart').exportAsImage()); PF('dlg').show();

What I'm doing wrong?


I also have like your requirement in my project. But, I fixed it by using jquery. It is working PF-4 or PF-5. Downlaod jquery.js and html2canvas.js. My jquery version is jQuery v1.7.2.

Here, my example exprot bar chart from primefaces showcase.

ChartView.java

@ManagedBean
public class ChartView implements Serializable {

    private BarChartModel barModel;

    @PostConstruct
    public void init() {
        createBarModels();
    }

    public BarChartModel getBarModel() {
        return barModel;
    }

    private BarChartModel initBarModel() {
        BarChartModel model = new BarChartModel();

        ChartSeries boys = new ChartSeries();
        boys.setLabel("Boys");
        boys.set("2004", 120);
        boys.set("2005", 100);
        boys.set("2006", 44);
        boys.set("2007", 150);
        boys.set("2008", 25);

        ChartSeries girls = new ChartSeries();
        girls.setLabel("Girls");
        girls.set("2004", 52);
        girls.set("2005", 60);
        girls.set("2006", 110);
        girls.set("2007", 135);
        girls.set("2008", 120);

        model.addSeries(boys);
        model.addSeries(girls);

        return model;
    }

    private void createBarModels() {
        createBarModel();
    }

    private void createBarModel() {
        barModel = initBarModel();

        barModel.setTitle("Bar Chart");
        barModel.setLegendPosition("ne");

        Axis xAxis = barModel.getAxis(AxisType.X);
        xAxis.setLabel("Gender");

        Axis yAxis = barModel.getAxis(AxisType.Y);
        yAxis.setLabel("Births");
        yAxis.setMin(0);
        yAxis.setMax(200);
    }
}

chartPrint.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>

Output

Don't forget to use appendToBody="true" in dialog.