PDF Reports for GFChart: How to Install and Configure
Reports for GFChart is a premium plugin for Gravity PDF that creates beautiful PDF Reports using the third-party plugin GFChart. The extension includes 15 report designs for you to choose from and supports all core GFChart types, including Pie, Bar, Column (horizontal bar), Progress Bar, and Calculations. You can purchase the Reports for GFChart plugin from the Extension Shop. This guide will walk you through installing and configuring Reports for GFChart to its full potential.
You can purchase the Reports for GFChart plugin from the Extension Shop. This guide will walk you through installing and configuring Reports for GFChart to its full potential.
Prerequisites
Along with having Gravity Forms and Gravity PDF installed on your website, to use Reports for GFChart, you need a GFChart ALL license, and have the following plugins installed:
- GFChart v2.2+ with active license key
- GFChart Image Charts v1.1.0-beta3+
The GFChart Image Charts plugins will NOT work with Gravity PDF Report for GFChart unless you've activated your GFChart license key on your website.
To add additional features to GFChart that enhances Gravity PDF Reports for GFChart, install the following plugins:
- GFChart Scheduled Notifications (send out PDF Reports on a fixed schedule)
- GFChart Survey Customiser (control chart segment colours and order)
GFChart Image Charts does not currently support the GFChart Charting vs Time, GravityView, or DIY add-ons. If this is a feature you're interested in, contact GFChart and let them know.
Installation
Please follow our installation guide, which provides instructions for uploading the add-on to your WordPress website and adding your license key for automatic updates.
Setup GFChart
We've put together a quick-start guide to get you up and running fast with GFChart. For an in-depth guide, you should review the GFChart documentation in full.
- Navigate to
Forms -> Settings -> GFChart
in your admin area and activate your GFChart license key. The GFChart Image Charts plugins will NOT work without a valid license key. - Next, head to the
Forms -> Charts/Calculations
page in your admin area. - Click the Add New button and in the popup enter a title for your chart and select which Gravity Forms will be the data source before saving.
- Under the Design tab, select a chart type, and then subsequent style(s) for using a Pie or Bar chart.
- Under the Select data tab, choose the field(s) that you want to include in the chart. Add any other filters you might want.
- Under the Customiser tab, adjust the chart width and height options. The ideal proportions are 700 (width) / 450 (height) if the chart will be displayed on its own line in the report, or 600 / 400 if the chart is displayed in a column.
- Review the chart under the Preview tab and then make any further adjustments to the settings required before saving.
Setup PDF Reports
Once you've setup your chart(s), it's time to create your PDF reports! Well, almost...
Before you do anything, you should determine what type of report you need, as this will establish which Gravity Forms you configure. For example, if you want to generate a report for every form submission, you'll setup your reports directly on the desired form. This setup is useful, but not limited to, the following use-cases:
- Donation / Charity Auction - a donation is made via Gravity Forms, and the report includes a chart showing the total amount raised. A variation on this is a charity auction where the chart shows the total amount raised / voted for each item.
- Quiz - after completing a quiz/survey, the report contains chart(s) showing the aggregate results.
- Event/Booking/Registration/Subscription - after completing the form, a report PDF is sent showing other user's demographics.
- Report on demand - rather than scheduling reports, you can create a form that will send out the report on submission.
If you'd prefer to get a report once a day/week/month you would create a new Gravity Forms for this purpose. See our Scheduling Reports section for more details about this configuration. Whichever option you decide, you setup the report PDFs like you would any other: via your form's PDF settings.
All Reports for GFChart templates have common settings that can be configured, such as font, security and PDF attachments, and we recommend reviewing the PDF setup guide to get a better understanding on all the available options. The individual template-specific configuration is done from the Template tab, and below you’ll find detailed information about the available options.
Templates
Reports for GFChart come with five unique report styles to choose from, with each report including two variants – a total of 15 different designs! The templates available are:
The reports share a set of common Template settings which makes it easy to swap between the designs without losing your configuration. Below is a numbered list of all common settings and an image overlay showing where they are placed in the reports. Just keep in mind each report style will display them differently – the sample below is Maxwell (Standard).
1. Main Heading
- Give your report a title, so the reader knows exactly what the document is about. Merge tags are supported.
- Leave the field blank to disable.
2. Introduction
- Control what content gets displayed before your charts. Merge tags are supported.
- GFChart has a Calculation and Progress Bar type, which may not be suitable for the standard chart display. For more control, include the associated shortcode in this setting.
- Leave the field blank to disable.
3. Chart 1/2/3/4
- Select which GFChart charts you'd like to include in the PDF report. Up to four charts can be included.
- You aren't limited to including charts from the current form; you can add charts assigned to any of your Gravity Forms.
- For optimal display in the PDF, you may need to adjust the GFChart height and width under the Customiser tab (refer to the Setup Charts section).
- If you've configured your GFChart to include a Background Colour, it will be automatically removed in the PDF.
- Leave the field blank to disable.
4. Additional Info
- Control what content gets displayed after your charts. Merge tags are supported.
- GFChart has a Calculation and Progress Bar type which may not be suitable for the standard chart display. For more control, include the associated shortcode in this setting.
- Leave the field blank to disable.
5. Header
- Display content (including images) at the top of every page in your report. Merge tags are supported.
- For better control over your image height, select the "Text" tab in the Rich Text Editor, then add
style="max-height: 400px"
to the IMG tag (adjusting 400px to a suitable value).
6. Footer
- Display content (including images) at the bottom of every page in your report. Merge tags are supported.
- For better control over your image height, select the "Text" tab in the Rich Text Editor, then add
style="max-height: 400px"
to the IMG tag (adjusting 400px to a suitable value).
Maxwell
Recommended Font: Roboto (Li/LiI/Reg/RegI) at 12pt
and colour #221e20
(dark grey).
The standard version of Maxwell has no additional Template settings.
Stylized
Recommended Font: Roboto (Li/LiI/Reg/RegI) at 12pt
and colour #221e20
(dark grey).
Header Image
- Upload an image to use as a background in the PDF header.
- The optimum image height is 68mm / 2.68in, while the width should be equal to the Paper Size width you've selected (eg. A4 = 210mm, Letter = 8.5in).
- If no image is selected, the default "astronaut" image will be used instead.
Primary Colour
- The primary colour is used as a transparent overlay for the Header Image, as well as the Introduction text colour.
Secondary Colour
- The secondary colour is used as the border colour for GFChart, as well as a footer accent.
Stylized Alt
Recommended Font: Roboto (Li/LiI/Reg/RegI) at 12pt
and colour #221e20
(dark grey).
Primary Colour
- The primary colour is used as the Introduction text and GFChart border colour.
Secondary Colour
- The secondary colour is used for the Introduction, divider, and footer colours.
Alice
Recommended Font: Lato (Li/LiI/Reg/RegI) at 14pt
and colour #FFFFFF
(white).
Background Gradient Colour #1
- Select a colour to use in the linear background gradient. Defaults to
#f43628
(red)
Background Gradient Colour #2
- Select the other colour to use in the linear background gradient. Defaults to
#e9e54c
(yellow)
Stylized
Recommended Font: Lato (Li/LiI/Reg/RegI) at 14pt
and colour #FFFFFF
(white).
Background Gradient Colour #1
- Select a colour to use in the linear background gradient. Defaults to
#ff5f20
(orange)
Background Gradient Colour #2
- Select the other colour to use in the linear background gradient. Defaults to
#162672
(dark blue)
Stylized Alt
Recommended Font: Lato (Li/LiI/Reg/RegI) at 14pt with a colour of #FFFFFF (white).
Background Gradient Colour #1
- Select a colour to use in the linear background gradient. Defaults to
#f43628
(red)
Background Gradient Colour #2
- Select the other colour to use in the linear background gradient. Defaults to
#e9e54c
(yellow)
Metro
Recommended Font: Ubuntu (Li/LiI/Reg/RegI) at 14pt
and colour #000000
(black).
This template variant does NOT support the Header setting.
Logo
- Upload an image to use as a Logo. It is displayed at the beginning of the report.
- The Logo will be displayed in a column to the right of the Main Heading.
Background Image
- Upload an image to use as a background in the PDF.
- The optimum image width and height should be equal to the Paper Size (eg. A4 = 210x297mm, Letter = 8.5x11in).
- If no image is selected, the default "city" image will be used instead.
Primary Colour
- The primary colour is used as a transparent page overlay and the Footer background colour. The default colour is
#f0c522
(warm yellow).
Footer Type
- A radio setting that controls how the Additional Info and Footer settings get displayed in the PDF. There are two options: Fixed and Floating.
- The Fixed footer is absolute-positioned at the bottom of the last page of the report and has limited space for the Additional Info and Footer content. If the PDF only has one page, it will be displayed on the first page.
- The Floating footer will always be displayed after the charts and expand to suit the content. Select this type if you have a lot of content to add to the Additional Info and Footer sections.
Stylized
Recommended Font: Ubuntu (Li/LiI/Reg/RegI) at 14pt
and colour #FFFFFF
(white).
This template variant DOES support the Header setting.
Background Image
- Upload an image to use as a background in the PDF.
- The optimum image width and height should be equal to the Paper Size (eg. A4 = 210x297mm, Letter = 8.5x11in).
- If no image is selected, the default "city" image will be used instead.
Primary Colour
- The primary colour is used as a transparent page overlay. The default colour is
#292c5a
(navy blue).
Secondary Colour
- The primary colour is used as a transparent page overlay. The default colour is
#f0c522
(orange).
Footer Type
- A radio setting that controls how the Additional Info and Footer settings get displayed in the PDF. There are two options: Fixed and Floating.
- The Fixed footer is absolute-positioned at the bottom of the last page of the report and has limited space for the Additional Info and Footer content. If the PDF only has one page, it will be displayed on the first page.
- The Floating footer will always be displayed after the charts and expand to suit the content. Select this type if you have a lot of content to add to the Additional Info and Footer sections.
Stylized Alt
Recommended Font: Ubuntu (Li/LiI/Reg/RegI) at 14pt
and colour #2b2e71
(navy blue).
This template variant DOES support the Header setting.
Background Image
- Upload an image to use as a background in the PDF.
- The optimum image width and height should be equal to the Paper Size (eg. A4 = 210x297mm, Letter = 8.5x11in).
- If no image is selected, the default "city" image will be used instead.
Primary Colour
- The primary colour is used as a transparent page overlay. The default colour is
#f0c522
(warm yellow).
Footer Type
- A radio setting that controls how the Additional Info and Footer settings get displayed in the PDF. There are two options: Fixed and Floating.
- The Fixed footer is absolute-positioned at the bottom of the last page of the report and has limited space for the Additional Info and Footer content. If the PDF only has one page, it will be displayed on the first page.
- The Floating footer will always be displayed after the charts and expand to suit the content. Select this type if you have a lot of content to add to the Additional Info and Footer sections.