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 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
A variety of charts and graphs
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
>> Running a school? Learn how to build a college application form in WordPress!
Step 2: Add a shortcode to display your charts and graphs
Now it's time to create a graph. 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.
The graph shortcode in the text editor of your page.
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.
[frm-graph fields="485" x_axis="484" type="pie" data_type="total" colors="#21759B,#EF8C08,#ae380a,#1C9E05"]
[frm-graph fields="485" x_axis="484" type="hbar" data_type="total" colors="#21759B,#EF8C08,#ae380a,#1C9E05"]
[frm-graph fields="485" x_axis="484" type="scatter" data_type="total" colors="#21759B,#EF8C08,#ae380a,#1C9E05"]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 chart 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.
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.
Hi..
I want a website that will allow users to enter a value, and then at the end of the survey the results are graphed for each individual user, not cumulative..
Can you help me?
Graph data can be filtered, so only results for the current user are graphed: https://formidableforms.com/knowledgebase/graphs/#kb-filtering-parameters
Hi there,
I have multiple fundraising projects and want to show real time contributions (on each of the campaign pages). Contributions will be processed through PayPal. Can I accomplish this with FF?
Thank you for your time!
Michael
Hi Michael,
Yes - this should be possible using the graphing feature. You could use the data from the donation amount field to build your dataset for graphing.
Hi, I am looking for a form that logged in users / members can log their temperature into daily and it creates a graph. So I can see their temperature over say 30 days... can this plugin do that?
Yes - Formidable sounds like it would be perfect for your needs!
Hi Nathanael,
Im just getting started with Formidable and have built a piechart diagram showing results, which is great. But Im now trying to build a geography chart, in which I would actually like to show where we work and where we dont, so very binary result really, and preferably a link to a page from the results where there is a positive result. Is this something you have any demos on? I know Im twisting the form format a little as I am using it for presentational content rather than as a standard form showing replies..
Thanks
Would a Geo map based off a country dropdown work for you? https://formidableforms.com/knowledgebase/graphs/#kb-geo
Well that is actually exactly what I'm trying to set up 🙂
The challenge is to get a way to diplay a link for each country. Ideally I would not get the pop up on hover (e.g. Afghanistan submissions: 1), but instead I could just click the country, and go to a page, where we describe our activities in the country.
Is that at all possible? Or am I trying to get the tool to do something it cannot, I know there are other solutions out there, but I was just setting up other forms and thought this might work for me in this aspect too..
Would you be able to open a ticket in our helpdesk about this? Its probably more than can be covered in blog comments...
Is there any way to ensure that a given field value is always assigned the same color? I have a radio button with 6 options and each option has a color associated with it. Not all of the options will always have values for the count so every time it loads the colors jump around to different values.
That i'm not sure about Brian. If you open a ticket in our helpdesk we could look into this...
The frm-graph shortcode doesn't allow (most) shortcodes to be embedded but I figured out a way to control this by building the correct set of color codes into a string and then passing the string as a parameter into the colors attribute. Sometimes you just gotta get creative 🙂
Hi Brian! I think you have managed to do what I am trying to achieve right now. I have a pie chart where I want to have the slices red for yes and green for no - can you share how you managed to pass through the parameter to graph shortcode? It would be much appreciated!
I am trying to display water quality data from multiple location. We have several schools collecting data and we would like to have that data entered by the students and displayed as a graph or table. The data needs to be searchable by locations and date range it was entered, then displayed as a chart or table selected by the student.
Is this possible with Formidable?
Thanks,
Tammy
Hi Tammy,
Yes, what you describe is possible with Formidable. 🙂
We offer a full 14 day money back guarantee, so you can try it out risk-free and make sure Formidable is a perfect fit for your project.
Hola he seguido tu ejemplo al apie de la letra, en el front donde deberia aparecer el grafico solo aparece el mensaje: no hay datos, que me estaria faltando, tengo la vercion pro del plugin.
saludos
Can you please open a ticket in our helpdesk and our team will be happy to help you with this.
Is there anyway to make the charts less jumpy? I'm using a pie chart but if I scroll over the popup box (that displays the answer for the slice of pie your on) its very jumpy.
Hi Richard,
I see you were able to create a ticket in our help desk for this question. That's great as we can't provide support like this on our blog. We'll get you taken care of from the support desk.