Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Nathanael Jones / Last Updated November 1, 2021

How to Create Charts and Graphs from 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.

Easily Display WordPress Charts and Graphs without a WordPress chart Plugin

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.

Subscribe on YouTube

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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

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
Examples of Formidable charts and graphs without a WordPress graph plugin

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.
Create Charts and Graphs with a form builder instead of a WordPress Chart Plugin

form entries for building WordPress charts and graphsFirst, 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.

Add graph shortcode on your WordPress page

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:

WordPress bar chart [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

WordPress chart for total votes 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

colorful WordPress charts and graphs 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.

WordPress pie chart[frm-graph fields="485" x_axis="484" type="pie" data_type="total" colors="#21759B,#EF8C08,#ae380a,#1C9E05"]
WordPress horizontal bar chart[frm-graph fields="485" x_axis="484" type="hbar" data_type="total" colors="#21759B,#EF8C08,#ae380a,#1C9E05"]
WordPress scatter chart[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.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. Nick says

    May 14, 2017 at 8:45 am

    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?

    Reply
    • Nathanael Jones says

      May 14, 2017 at 10:01 am

      Graph data can be filtered, so only results for the current user are graphed: https://formidableforms.com/knowledgebase/graphs/#kb-filtering-parameters

      Reply
  2. Michael Usowski says

    May 18, 2017 at 12:29 pm

    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

    Reply
    • Nathanael Jones says

      May 19, 2017 at 1:41 am

      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.

      Reply
  3. Lucy Hall says

    May 22, 2017 at 12:25 am

    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?

    Reply
    • Nathanael Jones says

      May 22, 2017 at 1:40 am

      Yes - Formidable sounds like it would be perfect for your needs!

      Reply
  4. Charlotte says

    July 24, 2018 at 1:41 am

    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

    Reply
    • Nathanael Jones says

      July 24, 2018 at 2:02 am

      Would a Geo map based off a country dropdown work for you? https://formidableforms.com/knowledgebase/graphs/#kb-geo

      Reply
      • Charlotte says

        July 24, 2018 at 8:00 am

        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..

        Reply
        • Nathanael Jones says

          July 24, 2018 at 9:22 am

          Would you be able to open a ticket in our helpdesk about this? Its probably more than can be covered in blog comments...

          Reply
  5. Brian Johnson says

    August 10, 2018 at 9:16 pm

    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.

    Reply
    • Nathanael Jones says

      August 11, 2018 at 2:30 am

      That i'm not sure about Brian. If you open a ticket in our helpdesk we could look into this...

      Reply
      • Brian Johnson says

        August 13, 2018 at 7:26 pm

        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 🙂

        Reply
        • Stephanie Woods says

          October 12, 2020 at 7:05 am

          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!

          Reply
  6. Tammy Rusch says

    November 18, 2019 at 11:17 am

    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

    Reply
    • Nathanael Jones says

      November 18, 2019 at 12:04 pm

      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.

      Reply
  7. reiniel says

    November 20, 2019 at 2:08 pm

    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

    Reply
    • Nathanael Jones says

      November 21, 2019 at 12:56 am

      Can you please open a ticket in our helpdesk and our team will be happy to help you with this.

      Reply
  8. Richard Thomas says

    November 18, 2020 at 10:11 pm

    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.

    Reply
    • Steve Wells says

      November 19, 2020 at 11:18 am

      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.

      Reply
  9. Bruce Fletcher says

    March 24, 2021 at 5:00 am

    Hi there, new user wondering if you can point me to an example of a stacked column graph shortcode.

    Reply
  10. Gavin Routledge says

    April 15, 2021 at 8:14 am

    Hi, I need to create a score from a form. There are 24 statements. The user ticks the statements that apply to them. I need the system to add up the number of ticked statements and ideally create a % from that e.g. if they tick 12 out of 24 statements that would be a score of 50%.
    Then I need to create a chart so that when the user submits this form weekly we can chart their progress with a linegraph. Can I do that with FM? Thank you.

    Reply
    • Nathanael Jones says

      April 15, 2021 at 8:52 am

      Hi Gavin,
      Yes - Formidable can do this. 🙂

      Reply
  11. Robert says

    September 13, 2021 at 2:49 pm

    Hi, I want to realize the following:
    the visitor has the possibility to choose either "yes" or "no" in approx. 8 to 10 lines.

    Each line has a fixed numerical value in the respective two columns. If "Yes" is selected, the numbers from the "Yes" column should be added, if "No" is selected, then from the other column.

    The sum (always below 100) should then be displayed in a bar. Depending on the sum between 1 and 100, the bar should be colored (red to green, rather red is under 50 / rather green is over 50).

    Here is an example of a calculation table that I am currently using in Excel (offline): https://docs.google.com/spreadsheets/d/1pQi1O9RwBXwIuw3QaT2jC1AVBL-T8GbBPjoYEl7xz58/edit?usp=sharing

    Is this possible with your plugin?

    Thank you so much for your help!

    Reply
    • Nathanael Jones says

      September 14, 2021 at 12:38 am

      Hi Robert,
      Can you please ask this question in our helpdesk? https://formidableforms.com/new-topic/

      Thank you.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a Calculator in WordPress: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How to Require Email to Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2022 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews