How to display your Gravity Forms data using charts

How to Display Your Gravity Forms Data Using Charts

Written by Casey Burridge

Last updated:

Categories GravityCharts

Tags

Gravity Forms allows you to collect all kinds of data on your website, but there’s no way to visualize that data, unless you use an add-on like GravityCharts.

In this post, we’ll show you how to extract meaningful insights from your Gravity Forms data using charts and visualizations. Here’s what we’re going to cover:

  • Comparing the three charting solutions for Gravity Forms
  • Choosing the correct chart for your data
  • Creating, styling and embedding a new chart using GravityCharts

Ready to learn more about Gravity Forms charts and calculations? Let’s get started! 👇

💡 Check out a live demo of GravityCharts and get your own free trial site preloaded with all GravityKit add-ons!

Why Display Your Gravity Forms Data Using Charts?

There are several reasons why you might want to display your Gravity Forms data graphically. Plotting data on charts and graphs helps you put that data in context, extract meaningful insights from it and take actions that improve your business.

Creating charts using your Gravity Forms data allows you to:

  • Create business reports
  • Build data dashboards
  • Visualize and interpret your data
  • Engage with your members and audience

Gravity Forms Charts Plugins Compared

There are three plugins that allow you to create charts using your Gravity Forms data: GravityCharts, GFChart and MaxiCharts. We’ll compare and contrast each of them below.

GravityCharts

GravityCharts is a premium add-on for Gravity Forms that enables you to easily create beautiful visualizations using your form data. GravityCharts is one of the plugins that we offer as part of our “toolkit” of essential Gravity Forms add-ons.

Using GravityCharts, it’s easy to create new charts and there is a range of design options, allowing you to create custom visualizations in only a few clicks.

Stand out features:

  • Intuitive user interface
  • Supports a wide variety of chart types 
  • Advanced conditional logic 
  • Highly customizable
  • Live-updating chart preview
A Gravity Forms column chart built using GravityCharts

GFChart

Another possible solution for creating charts and graphs is GFChart. With GFChart, you can display visualizations and calculations using the data you collect through Gravity Forms.

GFChart offers some nice features (like charting vs time) but these require you to install add-ons. The user interface is also less intuitive and does not feature a live-updating chart preview.

Stand out features:

  • Charting vs time (requires add-on)
  • Plot multiple data sets on one axis (requires add-on)
The GFChart configuration screen

MaxiCharts

Unlike GravityCharts and GFChart, MaxiCharts is free to use. However, it’s important to know that the plugin is no longer being maintained and has not had an update for quite some time. Therefore, we’d advise you not to install it.

Installing defunct plugins can endanger your website by introducing security vulnerabilities or conflicts that won’t be resolved. Furthermore, if you experience an issue and need support, there’s nobody who can help you, and that’s not good.

GravityCharts Chart Types

One of the standout features of GravityCharts is the fact that it supports five unique chart types.

  • Bar / Column
  • Line / Area
  • Pie / Doughnut
  • Polar Area
  • Radar

Each chart type is suited for different kinds of data, so the chart type you choose will depend on the data you want to display and your reason for displaying it.

Gravity Forms charts types in GravityCharts

Here’s a quick guide on choosing the right chart for your data.

How to Choose the Right Chart for Your Gravity Forms Data

Choosing the right chart for your data depends on how you want to visualize that data and the type of analysis you’re conducting. Here’s an overview of different chart types and the type of analysis they work best for.

Comparing Values

Are you looking to compare multiple sets of values? Charts are perfect for comparing different sets of data and showcasing the low and high values in the set. An example of this would be comparing the number of people with remote jobs to the number of people with regular office jobs.

If you want to create a comparison chart, use one of these graph types:

  • Bar
  • Column
  • Pie 
  • Line

Showing the Composition of Something

Are you looking for a way to show how individual choices make up the whole of something? An example of this is the different device types used by visitors who access your website or your audience’s favorite sport.

You can use these types of charts to show data as a percentage of the whole: 

  • Pie
  • Area

Visualizing the Distribution of Your Data

Visualizing the distribution of your data is a great way to identify the normal tendency. This helps you to pick out trends, identify outliers and make predictions. Use these chart types to show distribution:

  • Line
  • Column
  • Bar

If you want to analyze your data against time, you can’t go wrong with a line chart. Charting your data against time helps you evaluate trends during different time periods, and assess how your data has performed over time. Although GravityCharts does not yet support charting vs time, this feature is coming soon.

Creating Gravity Forms Charts Using GravityCharts

Now let’s look at how you can create custom charts in Gravity Forms using the GravityCharts add-on.

In this example, we’ll create a form on our website asking users how they heard about our company. Then, we’ll take that data and visualize it using a pie chart. Let’s get started!

Creating the Form

We’ll start by creating a form on our website asking customers how they heard about our company. Our form only contains one field (Radio Buttons) with 5 choices.

  • Google search
  • Through a friend
  • Facebook ad
  • Social media
  • Blog or article

Customers select the option that applies to them and click submit. That data gets recorded in our database, which isn’t very helpful. What’s more helpful is taking that data and displaying it on a pie chart so we can better understand which of our marketing channels is bringing in the most customers.

A form with a Radio Buttons field that says 'How did you hear about us?'

After creating our form and embedding it on the front end, we need to install the GravityCharts add-on.

Installing the GravityCharts Add-On

If you have a GravityView All Access license, you can install GravityCharts from the Manage Add-Ons page in WordPress.

The GravityCharts plugin preview on the Manage Add-Ons screen

Otherwise, you’ll need to download the plugin from your Account page and manually install it on your website.

Creating a New GravityCharts Feed

The next step is to create a new GravityCharts feed. We’ll do this by editing our form, hovering over Settings, selecting GravityCharts and clicking the Add New button.

After giving our new chart a name, we need to select a chart type. Because we want to show each choice in our form as a part of the whole, we’ll select the Pie / Doughnut chart.

Chart types in GravityCharts with a green checkmark next to 'Pie / Doughnut'

Now we need to configure our chart to display the data we want and add custom styles to adjust the look and feel.

Configuring and Styling Our Chart

After selecting a chart type, we need to choose a data source. The data source is a field from our form with the data we want to display on our chart. We can also add conditional logic to filter our data based on certain criteria.

Selecting a data source in GravityCharts

Finally, we can customize the look and feel of our chart by selecting different options from the design menus in the Chart Configuration panel. You will see up to 4 different configuration menus here (for the pie chart, there’s only 3).

GravityCharts chart configuration settings

Each menu contains different options for tweaking the look and feel of your chart on the front end. As you select different options, the chart preview will update in real-time.

  • Colors – select a color scheme from a range of predefined color palettes
  • Design – change the border thickness, convert to doughnut chart and more
  • Title & Legend – add and position a chart title and legend

Here’s what our chart looks like after a playing around with the styling:

The GravityCharts live-updating chart preview

The final step is to embed our chart on a page or post.

Embedding Our Gravity Forms Chart on the Front End

We can embed our new chart on a page or post using the WordPress block editor. To do this, we’ll create a new page, click on the ‘+’ icon to open the block picker and add the “GravityCharts” block to our page.

Now we need to select our form and chart from the dropdown menus on the right.

The GravityCharts block settings

Here’s what our Doughnut chart looks like on the front end:

A Gravity Forms doughnut chart on the front end

That’s it! As you can see, creating, styling and embedding charts using GravityCharts is a simple and intuitive process.

Whether you’re building a site for a client or looking at ways to improve your own business processes, GravityCharts gives you the tools you need to create beautiful visualizations that stand out.

💡 Pro tip: You can now save your charts as static images! This allows you to include them in Gravity Forms confirmations/notifications, as well as PDFs generated by Gravity PDF.

Get Started With Gravity Forms Charts Today

Taking your form data out of the database and visualizing it with charts and graphs allows you to discern trends over time, compare different datasets, and analyze the distribution of the data you collect.

In this post, we compared three different for Gravity Forms charts plugins and showed you how to display your data using GravityCharts. If you enjoyed this post, learn more about GravityCharts or check out more articles on our blog!

Join Our Newsletter!📧🙌

✅ Helpful Gravity Forms content straight to your inbox

✅ Be the first to hear about new updates and releases