See all tutorials

Tutorials » Generate chart images

Although the modern browsers can render SVG charts it is often a requirement in web applications to generate chart images that can be attached, embeeded or sharred. Apache FOP allows an easy way to transform an SVG into an image.

This tutorial will show how Webpagebytes CMS can be used together with Apache FOP to generate dynamic image charts. Going further, the dynamic images can be used in web content, email templates or PDF documents.

In order to generate a dynamic image chart take the following steps:

Move the SVG content to a page module

Step 1

In Webpagebytes CMS administration interface create a Page module with the SVG content presented in the previous tutorial. Moving the SVG in a page module has a couple of benefits: it can be reused easier across different contents, there is a single place to edit it's content.

Create an XLS-FO that embeds the SVG content

Step 2

Create a site page with the following xls-fo content. Note in bold the reference to wpbModule that represents the SVG page module.

<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="page" page-width="120mm" page-height="180mm" margin="10mm">
    <fo:region-body margin-top="1mm" />
    </fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="page" initial-page-number="1">
    <fo:flow flow-name="xsl-region-body">
        <fo:block>
            <fo:instream-foreign-object> 
                <@wpbModule externalKey="71a5d3e1-c573-4825-b3d1-1e175eec3a17" name="svg-chart-bars"/>
            </fo:instream-foreign-object>    
    </fo:block>
    </fo:flow>
</fo:page-sequence>
</fo:root>

Generate image from XLS-FO using Apache FOP

Step 3

Apache FOP takes XLS-FO content and converts it to various outputs, one supported output is image format. One previous tutorial presented how Webpagebytes CMS can be used to fetch the XLS-FO content and convert it using apache FOP, for details please see how to generate dynamic PDF.

Test the generated image bar chart

Step 4

In a browser load the url published at step 3 to see the generated chart image.
Image png bar chart generated with Webpagebytes CMS

Fork me on GitHub