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!
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!
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.
Why would you use a WordPress charts and graphs plugin?
Graphs and charts may look easy to make, but they're actually difficult when you don't know how to code.
So, that's where a plugin comes in. And a plugin has a few benefits to creating on yourself:
- Ease of use. Plugins take something difficult and make it easy. And a chart plugin does exactly that for your charts/graphs to make it easy.
- Time-saving. Coding and designing a chart or graph is time-consuming. But a plugin takes that away and makes it faster.
- Multiple chart types. Could you imagine having to make multiple chart types? Doesn't sound fun, does it? And that's why a plugin makes it as easy as one click.
- Updates. Updates to your website can break elements on your site without you knowing. A plugin has frequent updates to keep things working.
So, while there are many ways to make a chart or a graph, using a plugin for WordPress is the simplest option.
Now that we've got that out of the way, let's dive into making one.
How to create WordPress charts and graphs
First things first, you’ll need Formidable Forms as your WordPress 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 making the best chart for WordPress.
It’s a few simple steps to display your charts and graphs:
For our example, we’ll use our website, Here Birdie Birdie, one of the premiere bird-watching blogs.
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.
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
Step 1: Customize your shortcode
We first need to prepare our shortcode 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%”]
Don’t worry. This isn’t 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 for which field we want the data. 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”]
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”]
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:
- is3d=”true”
- show_key=”1”
- 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”]
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 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.
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 charts and graphs can you create with Formidable?
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
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, a chart plugin, or even a bar graph plugin. You just need a simple form builder to help create a chart 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 from WordPress.org to get a sample.
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 (In 3 Steps)
How to Create Polls in WordPress With Powerful ResultsDid 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!
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.
Can yo show us how? I've been looking for it but I can't find any.
Thanks
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!
How could I remove number of submission which is displaying on charts or graphs on mouse over, please guide me.
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.
Hi there, new user wondering if you can point me to an example of a stacked column graph shortcode.
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.
Hi Gavin,
Yes - Formidable can do this. 🙂
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!
Hi Robert,
Can you please ask this question in our helpdesk? https://formidableforms.com/new-topic/
Thank you.
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?
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/