Charts in the user interface can be tied to images in your PDF or Word export documents. To do this, you need to place an image (any image) into your Word document. The contents of the image file don’t have an effect in how the charts will be displayed in the export. However, the size of the images will determine how much space the charts will take. We recommend not using small images as this can interfere with the chart elements like the axes and data points to be not drawn correctly.

In this guide, we’re going to use an HR Dashboard application that visualizes employee data on two charts. The first chart shows the year-over-year changes to the base salary and bonuses paid, while the second chart represents overtime hours by department.

Assuming that we want to include both of these charts in the export, as well as the header, we need to add two images into the Word document which will be used in the print process. Our export document looks like below.

print charts

Next, we need to establish the connection between the two images and the charts. To do this, we need to assign stubs to each image by right clicking the image and selecting Edit Alt Text.

print charts

Enter an identifier name into the Description field by placing it in double curly braces (i.e. {{Name}} ). In this example, we named the first image {{Salaries}} and the second one {{Overtime}}.

print charts

Once you save your document, you can now start creating the print process. To do this, go to the Print Process Designer page either from the dial menu or the main designer menu.

print charts

On the Print Process Designer page, click Add Print Process to create a new process.

print charts

After configuring the print process settings, click Create Print Process. Note that charts are supported in both PDF and Word formats.

print charts

The new print process will not be displayed on the Print Process Designer page. Hover your mouse over the print process module, and then click Documents.

print charts

Edit Print Process Documents page lists all active documents under this print process. Click Add to start uploading your Word document.

print charts

Here, give your document a name and upload the document itself. Note that the Document Name here will only be visible in the User Interface Designer. Click Create Document when you’re done to save your changes.

print charts

To assign the charts to the images we have in the Word document, click Document Stubs next to the document you’ve added.

print charts

On the Edit Document Stubs page, you will see the Alt Text assigned to each image under the Key column. Click the dropdown under the Visualization column to select which visualization each image will be replaced with. The system will include details about the charts from the user interface to help you determine which option refers to which visualization.

print charts

With the charts assigned and both charts made Active, the Document Stubs will look like below.

print charts

You can now go back to the User Interface Designer and assign the Export Process to a button. Click the Action button to configure it and select the print process from the Events menu. Remember to press Submit to save your changes to the Action button.

print charts

You will now get a PDF export of the two charts from your designer application when you press the Submit button.

print charts