Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Kyle Cash / Last Updated January 23, 2023

How to Create WordPress Charts and Graphs [Using Forms!]

Looking to create WordPress charts and graphs? This post will show you exactly how to create graphs and charts from forms so you can display them on your site!

How to Create WordPress Charts and Graphs

Approximate read time: 4 minutes

Nothing gets information across to people like a beautiful chart or graph.

They can take the most boring information and make it POP. And having a way to create your own charts/graphs for your website would help your business greatly!

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

But you’re no coder, and those fancy graphs are way too complex to create…or are they?

With your imagination and a plugin, you can create anything you can think of. And this post will show you how to easily create beautiful WordPress graphs and charts!

Let’s get started.

How to create WordPress charts and graphs

Subscribe on YouTube

First things first, you’ll need Formidable Forms as your plugin. (We figure you have the imagination already 😉)

Graphs and charts are available in Formidable’s Basic plan or above, so head to our website and get Formidable installed and activated. Then we’ll get started.

 Get Formidable Forms now!

It’s a few simple steps to display your charts and graphs:

  1. Customize your shortcode
    1. Display your graph/chart

      For our example, we’ll use our website, Here Birdie Birdie, one of the premiere bird-watching blogs on the web.

      Here Birdie Birdie Example Website

      We built a form on the site that collects bird-watching entries from website visitors, then displays them as a post. But we’ve had visitors asking what kind of birds people see most, and we want a simple way to show it to them.

      Example bird-watching form

      And Formidable’s charts and graphs feature is perfect for it. 

      Note: If you have your own data, you can create a form and then import the data into the plugin for easier display in your graph. Formidable accepts XML or CSV files.

      👉 Want to learn how to build a fantastic form?: How to Build Helpful WordPress Forms That Convert

      Formidable Forms pro plans

      Step 1: Customize your shortcode

      We first need to get our shortcode ready to look exactly how we want.

      We thought a column graph would be best for each type of bird.

      So, our shortcode starts like this:

      [frm-graph fields=”17” type=”column” width=”100%”]
      Basic bird-watching bar chart

      Don’t worry. This isn’t actually as confusing as it looks. Let us break it down:

      • Every graph or chart will start with frm-graph. This is the shortcode to display that graph.
      • The fields=”17” tells our shortcode which field we want the data from. In this case, it’s our “Bird Type” field.
      • The type=”column” tells the shortcode we want a column graph.
      • Width=”100%” means we want the graph to take up the whole page.

      While we like the look to start, it could have a bit more flair. So, we’ll change the colors of the bars to make them stand out more.

      Style the graphs and charts

      So, we’ll add a colors section and some HEX color codes to make it look better.

      [frm-graph fields=”17” type=”column” width=”100%” colors=”#E94F37, #D8315B, #1E1B18, #F39237, #ACECF7, #D6F6DD, #536B78, #FFFC31”]
      Colorful bird-watching bar chart example

      Now it’s looking pretty! But we think we can still do better.

      Change to different graph types

      Instead of a column graph, a pie graph would look cool and give our website visitors a quicker view of what birds are seen the most.

      So, we’ll change the type from column to pie.

      [frm-graph fields=”17” type=”pie” width=”100%” colors=”#E94F37, #D8315B, #1E1B18, #F39237, #ACECF7, #D6F6DD, #536B78, #FFFC31”]
      Example pie chart

      Alright, it’s looking better already. We’ll do one final thing, and it’ll be ready to go.

      Add helpful details

      To make the chart pop, we’ll give it a 3D effect. We’ll also add a key so visitors can easily see which birds are which.

      So, we’ll add three things:

      1. is3d=”true”
      2. show_key=”1”
      3. legend_position=”left”

      So, the code will look like this:

      [frm-graph fields=”17” type=”pie” width=”100%” colors=”#E94F37, #D8315B, #1E1B18, #F39237, #ACECF7, #D6F6DD, #536B78, #FFFC31” is3d=”true” show_key=”1” legend_position=”left”]
      Advanced pie chart example

      These are just a few of the changes Formidable can handle. For more, check out our docs to see how it can help your graphs and charts really shine!

      Step 2: Display your graph/chart

      Now it’s time to let our graph wow the world (or our bird-watching community, at least).

      And we can add it to any page or post we want. So, we’ll head to a page we made for our visitors so they can view all the future graphs and charts we create.

      First, we’ll add a Shortcode block. Next, we’ll paste the code we created above into the shortcode and click Update.

      Example Shortcode

      And that’s it!

      The graph is live and will update in real-time for the world to see! It’s that easy to create a graph or chart using form data!

      What other WordPress graphs and charts can you create with Formidable?

      Formidable Forms banner

      The simple answer? Any you can think of!

      Formidable offers charts and graphs for any need for your business, nonprofit, educational institution, or just for your fun!

      Here are a few of the types of charts and graphs Formidable gives you:

      • Pie chart (bar graph)
      • Bar chart (bar graph)
      • Line chart (line graph)
      • Area chart
      • Geo chart
      Example graph and chart types

      While Formidable may not be a charts and graphs plugin or data visualization plugin, it can easily handle those functions.

      Plus, it doesn’t stop there. With the premium version of Formidable, you get a lot more:

      • Responsive tables and charts on any theme (including Elementor)
      • WooCommerce integration
      • Formidable Views
      • And much more

      One plugin to do it all. Doesn’t sound too bad, right?

      Ready to make your chart in WordPress?

      Making a graph for your website is always an exciting project.

      And this post taught you that you don’t need Google Charts or a chart plugin for WordPress to make one. You just need a simple form builder to help create a graph in WordPress.

      So, don’t wait any longer! Whether it’s a pie chart, bar chart, or something else, now is the time to make it! Grab Formidable and get started, or try out the free version to get a sample.

       Get Formidable Forms now!

      And follow us on Facebook, Twitter, and YouTube for more great graph/chart tips and tricks!

      Read more about charts and graphs

      • How to Analyze Survey Results How to Analyze Survey Results (In 3 Steps)
        Read More
        How to Create Polls in WordPress How to Create Polls in WordPress With Powerful Results
        Read More

      Did you know that Formidable Forms is one of the fastest WordPress form builder plugins available today? If you're not already using it, get started with our free plugin or the full-featured pro version!

      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
          • Suaryana says

            October 5, 2022 at 9:09 am

            Can yo show us how? I've been looking for it but I can't find any.

            Thanks

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

        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
      12. mahnaz says

        August 20, 2022 at 5:39 am

        Hi
        I made an order form, now I want to put the graphs that I see in the reports section in a tab in wordpress, but I can't. Can you help me?

        Reply
        • srwells says

          August 22, 2022 at 9:55 am

          I'm not entirely sure what you mean by "tab in wordpress", but the reports aren't designed to be moved or relocated. You can create custom graphs and statistics on the front end of your site. Maybe that would be the best way to accomplish what you are after? https://formidableforms.com/knowledgebase-category/reports-graphs-statistics/

          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 WordPress Custom Calculator: 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
        • Best Gravity Forms Alternative for WordPress: 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
      • WP Tasty
      • Nutrifox

      Copyright © 2023 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