Generate png/jpeg image of Primefaces Charts in backing bean?

Question

I am using Primefaces 3.1.1 charts in my application, there is no problem generating charts in JSF page, but I'm trying to find out if it's possible to generate image (png or jpeg) for the charts so that I can insert these images into an Excel file (Apache POI) in java.

I know the latest Primefaces version 3.4.1 has an Export Chart feature, but the generated image only occurs at the client side (it's jqPlot). But I need it on the server side.

Currently we are using jFreeChart in the backing bean for this purpose, so the charts in browser looked very different from the charts in Excel. We are trying to find out whether by upgrading to Primefaces 3.4.1 can give us the option to make the charts in browser and the charts in Excel looked the same? Or is there another way of doing this?

Using mojarra-2.1.3-FCS if this is a concern.

Answer 1

As you already know Primefaces uses the jqPlot plugin to generate the charts , Since jqPlot is a jquery client side plugin it cannot generate anything on the server side , its a jquery plugin and not some server side api (jar)

So the answer is No :/

You might consider using some other server side chart generator (look at the links below) that will generate a better looking charts

13. Are there other "open source" chart libraries? (at the buttom)

What is the best open-source java charting library? (other than jfreechart)

Answer 2

As in the accepted answer provided by Daniel, Primefaces' charts are not available at the server side. I add an answer here only to show a possible workaround.

At the client side, we assign the base64 PNG encoded string to a hidden field value, an example modified from Primefaces demo source code for export charts:

<h:form id="hform">
    <p:lineChart value="#{testBean.linearModel}" legendPosition="e"
        zoom="true" title="Linear Chart" minY="0" maxY="10"
        style="width:500px;height:300px" widgetVar="chart" />
    <p:commandButton id="exp" value="Export" icon="ui-icon-extlink"
        onclick="exportChart();"
        actionListener="#{testBean.submittedBase64Str}" />
    <h:inputHidden id="b64" value="#{testBean.base64Str}" />
    <script type="text/javascript">
        function exportChart() {
        // exportAsImage() will return a base64 png encoded string
        img = chart.exportAsImage();
        document.getElementById('hform:b64').value = img.src;
        }
    </script>
</h:form>

At the backing bean, we need to decode the string, a simple example as below:

public void submittedBase64Str(ActionEvent event){
    // You probably want to have a more comprehensive check here. 
    // In this example I only use a simple check
    if(base64Str.split(",").length > 1){
        String encoded = base64Str.split(",")[1];
        byte[] decoded = org.apache.commons.codec.binary.Base64.decodeBase64(encoded);
        // Write to a .png file
        try {
            RenderedImage renderedImage = ImageIO.read(new ByteArrayInputStream(decoded));
            ImageIO.write(renderedImage, "png", new File("C:\\out.png")); // use a proper path & file name here.
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

The PNG file is now stored in the server, and you can continue to make use of that file in other parts of your codes.