See all tutorials

Tutorials » Charts in invoice templates, a complete example

Dynamic generated charts can be present in various content formats from web pages, emails, images, PDF documents, just to name a few. A web application might want to present the same data across all these formats and so finding a common way to manage the content across all these formats can bring an improvement in the development effort.

This tutorial will extend some previous tutorials about managing PDF invoice templates and email invoice template attachments , to insert a dynamic chart in an invoice example email body an the PDF attachment. Charts in email templates

In order to reuse the same chart across various content formats, take the following tasks:

Create a SVG chart in a page module

Step 1

The SVG chart template is a pie chart and it is similar with the one presented in a previous tutorial about generate charts in pdf files.
The request model will contain the dynamic chart items and the page module will generate the chart according to the dynamic data values. The SVG chart will be used to generate the chart image displayed in the invoice example email body and in the PDF attachment.

Export the SVG content in an image (.png)

Step 2

The web application will be able to define a dynamic URI in which the SVG content with the chart will be returned to the user as an image content type. For such an example see a previous tutorial about generating chart images.

Add the SVG content to the PDF invoice template

Step 3

The SVG chart generated ar Step 1 can be easily inserted in a generated PDF by following the instructions from dynamic chart images in PDF files.

Fetch the email invoice body and the invoice attachment

Step 4

Step 2 and Step 3 generated dynamic resources which can be used together to generate other content. Webpagebytes CMS allows to fetch content as stream of bytes without to write this content on disk, using in memory data will bring a speed optimization in handling the content.

Email body and the PDF attachment can be fetched similar with the steps presented in invoice email and invoice attachments tutorials. The controller that fetches the content from the CMS engine can use an email server to send the email to user(s).

Test the invoice email example

Step 5

Open the sent email and inspect the email body and the email attachment. The dynamic data: customer information, invoice data, QR code that includes a dynamic URL, the chart image should be the same in the email body and the email attachment. Any change to the email body or the PDF XLS-FO template will be instantly propagated in the new emails, Webpagebytes CMS mades this possible.

below is an image screenshot from a Gmail account receiving such an invoice email example.
invoice email with attachment

Fork me on GitHub