How to Create Charts and Graphs from your WordPress Forms

Why hunt for a WordPress graph plugin when Formidable Forms includes charts and graphs? Get a taste of the whole host of customization options.

Do you want to demonstrate your company growth, show product sales trends, or display a running total for a local fundraiser? A visual representation will always have a greater impact on your audience than numbers. This is especially true online, where attention spans are short, and text is often skimmed.

Text statistics look great when site visitors take time to read them. But you need instant, eye-catching impact. Communicate your data in a way that attracts attention with stylish, sleek and colorful graphs generated directly from your Formidable data.

Straight from your WordPress forms to charts and graphs

Have you been running polls and surveys and need a way to interpret the data? Are you tracking data over time, and need to see the changes at a glance? Formidable Forms offers a wide range of graphing options to choose from.

• column graphs
• horizontal bar graphs
• area graphs
• scatter graphs
• pie charts

• line graphs
• histograms
• tables
• stepped area graphs
• geographic heat maps

Step 1: Build your form to collect data

Thousands of types of data can be graphed. So this example should be translatable to as many situations as possible. I'll do a pie chart and a column chart from the same data to show the different setups.

First, add a dropdown to your form with the options: Green, Red, Orange, and Blue.

Next, add a number field for "Number of votes." This is to show how forms can be used to count EITHER the number of submissions, or the sum of those entries.

You can see from my list of entries that:

• Green has 1 entry, with 40 votes in total
• Blue has 2 entries, with 30 votes in total
• Orange has 3 entries, with 20 votes in total
• Red has 4 entries, with 10 votes in total

Step 2: Add a shortcode to display your charts and graphs

Navigate to the page on which you want to display your graph. Insert your graph shortcode in the WordPress text editor where you would like the graph to appear.

How about a basic column graph? The Field ID for my "Choose a color" dropdown is [484] so I'll start with this shortcode:

[frm-graph fields="484" type="column" data_type="count"]

This is perfect for simple forms where every submission is weighted equally, e.g. users voting for their favorite product. The graph displays the options from the dropdown along the horizontal axis, and the number of submissions on the vertical axis.

Define the x- and y-axis for your WordPress charts and graphs

But what happens when you don't want each submission to be weighted equally? Perhaps you want to give VIP members double the influence of standard members in a voting scenario? Or show fundraising contributions given to different projects?

That is where defining an x-axis or y-axis comes into play. For this next example, the sum of the "Number of votes" field is used for the vertical axis instead of the number of submissions. Now, the number of votes are counted. This is the shortcode I used to defined the x-axis:

[frm-graph fields="485" x_axis="484" type="column" data_type="total"]

Style your graphs and charts

The basic graph can be modified with additional shortcode parameters. For example, customize the graph colors with a comma-separated list of 6-digit hex colors.

[frm-graph fields="485" x_axis="484" type="column" data_type="total" colors="#21759B,#EF8C08,#ae380a,#1C9E05"]

Types of graphs and charts

Take advantage of the variety of graph types by changing the type=" " part of the shortcode. Options include column (as shown in the shortcode above), hbar, pie, line, area, scatter, histogram, table, stepped_area, and geo. Please note that geo will only work with a Country field (like a dropdown, Lookup field, or Dynamic dropdown).

WordPress charts and graphs examples

The examples below use the same dataset and basic shortcode. Only the 'type' parameter is changed.

---

Filter graph and chart data

A full set of advanced filtering options make your graphs even more powerful.

• Display results just for the current user.
• Include draft entries.
• Display entries created before or after a specified date.
• Only include entries where another field in the form contains a specific value.

WordPress charts without a WordPress graph plugin

Beautiful, eye-catching graphs that show the latest data from your form have never been easier. Transform your dry numerical results to instantly catch attention and draw in your website visitors. Once you're done, show off your hard work in our community site showcase and tell the world how you achieved it.

This short tutorial can't cover all of the options. So check out the charts and graphs documentation. You'll find more detail on filtering, graph legends, custom titles, and background colors in the docs.

Bonus Pun: I just watched a movie about a y=x graph. The plot was a bit predictable and a little flat. Good special f(x) though.

Share this post: on Twitter on Facebook on Google+