Development Tips

Logi Tutorial: How to Create Logi-Style PDFs

By John Sweazen | April 24, 2018

This is the fourth blog in our tutorial series on 10 of the best solutions from Logi’s Expert-on-Demand (EOD) team. In our previous blog, we looked at the GridStack and TableSelect plug-ins. Now, we’ll discuss a solution that you can use in conjunction with these plug-ins to create responsive dashboards: the Logi-style PDF.

Our PDF framework is a reusable shell template that exports charts and tables to PDF and also allows the end user to “design” the export page by page. It requires no coding on the application itself and is data driven—all you need to do is specify a data layer.

Here’s why you should use a Logi-style PDF:

It’s easy to configure with consistent outputs.

It’s data-driven. You can allow users to pick and choose what reports they’re going to define.

It’s visually stimulating and flexible. You can have any number of layouts, and each one crops to ensure that all content displays correctly and is optimized for readability.

How to Configure PDFs Using Logi

The database table structure is set up in Logi Info as follows:

Assign visualization reports to a specific quadrant location on a page.

Provide height properties for the visualizations.

Figure 1: Sample database showing Reports 1-4

In this database example, we have Report 1, Report 2, Report 3, and Report 4. The Logi template maximizes the space available for the visualizations. You can also send in a token for a report height. For instance, if you want one of your visualizations to take up three quarters of the page, you can do that and include another report below it.

By including or not including a value for the various “Report” columns, you will see different layout options available to you (on a page basis).

Figure 2: Layout options for PDFs

Typically, porting HTML to a PDF results in display errors. This is because print media has a specific width and height, while HTML is width-bound based on the browser size but unlimited based on the size of your content.

Rather than bleeding the visualizations over to the next page—which tends to ruin presentations—the Logi-style PDF limits each page by cropping the visualizations. As the designer, you can then specify the height of each visualization, resulting in a clean and consistent report layout for export.