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.
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.
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}}.
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.
On the Print Process Designer page, click Add Print Process to create a new process.
After configuring the print process settings, click Create Print Process. Note that charts are supported in both PDF and Word formats.
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.
Edit Print Process Documents page lists all active documents under this print process. Click Add to start uploading your Word document.
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.
To assign the charts to the images we have in the Word document, click Document Stubs next to the document you’ve added.
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.
With the charts assigned and both charts made Active, the Document Stubs will look like below.
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.
You will now get a PDF export of the two charts from your designer application when you press the Submit button.
