Are you looking to create WordPress charts and graphs?
WordPress charts are powerful visual aids that help you display data in meaningful ways to your readers. You can go a long way toward helping people truly understand your data with simple visualization, such as a graph graph, bar chart (column chart), line chart, doughnut chart, pie chart, and other charts.
There are several WordPress chart plugins you can use to add charts and graphs to WordPress, but most are cumbersome and complicated. Some plugins require you to complete endless menus or input long strings of data into shortcodes.
Rather than deal with the hassle, many users opt to make a quick chart in some other app and save it as an image. This method is crude and prone to error because you have to change the image every time there’s new data. A WordPress chart, however, is an interactive WordPress chart that will update whenever data is submitted through a form.
In this article, we’re going to show you how to create WordPress charts and graphs on your site using GFChart, a simple-to-use extension for the popular Gravity Forms plugin. We’ll also offer some best practices to make your WordPress charts and graphs clear and effective.
You can go a long way toward helping people truly understand your data with simple graph, bar, line, and pie charts. Share on XWhy Use GFChart for Your Graphs and Charts?
Before we jump into the tutorial, we’d like to mention why GFChart is the best WordPress plugin for adding beautiful charts and graphs to your site:
- Most WordPress plugins require you to enter your data manually or through a CSV file. GFChart compiles data submitted through forms, which means anyone with access to the form can supply data to your WordPress charts and graphs.
- Some WordPress plugins require you to set up a MySQL connection to WordPress’ database. This is complex and stressful if you aren’t familiar or comfortable working with your web host or database directly.
- Building a chart or graph with this WordPress chart plugin is simple. All you have to do is follow the simple, four-step process using a visualizer to make your own line chart, vertical or horizontal bar chart (column chart), pie chart, or other chart type. This is an easy chart maker and graphs plugin that’s right for business, entrepreneur, or organization.
- GFChart looks great on the page. These responsive charts are clean, professional, and easy to read. Add to any page or post using a shortcode, and even add multiple charts to the same page. Users can manipulate these interactive charts on the page with front-end filtering and sorting.
- GFChart integrates with other functionality, extending tools to get more value from your charts, such as Gravity PDF and GravityView. These other tools will extend the functionality of your interactive charts.
- GFChart works with Gravity Forms, the most popular WordPress forms plugin. If you use forms regularly, you’ve undoubtedly heard of Gravity Forms.
- It’s a more robust and professional wordPress chart plugin than a Google Chart, Visualizer, Charts Ninja, Data Tables Generator, or a chart made using a Google spreadsheet.
How to Create Charts and Graphs Using GFChart
This tutorial will walk you through the process of creating interactive and beautiful WordPress charts and graphs. We’ll be using Gravity Forms and GFChart, a WordPress chart plugin that lets you create beautiful charts and graphs.
Step 1: Grab the required WordPress plugins
Before you can make your own WordPress chart, you need two WordPress plugins: Gravity Forms and GFChart . Both come with a small cost, but the reliability and automation they provide are priceless.
Step 2: Create a Gravity Form
Next, set up a Gravity Form and submit some entries. If you’re a Gravity Forms user, you may already have some existing forms with entries. If you’ve never created a Gravity Form before, read their full guide (it’s pretty simple).
Step 3: Create the chart or graph
Your next step is to begin building the form. Click Forms > Chats/Calculations in your WordPress backend to reach GFChart’s graph builder. This is the charts manager where you’ll see a list of your WP charts. Click Add New to get started.
Next, give your new WordPress chart a name. We recommend using a unique name that won’t conflict with other charts. This will help you find it in the future if you need to make changes to it. Avoid vague names like “chart 6” or “May 12 chart.”
Once you’ve chosen a name, select the Gravity Form from which the chart will pull data. Then click Create Chart/Calculation.
Step 4: Configure your WordPress chart or graph
GFChart is a simple WordPress plugin that’s designed to help you get through the chart creation process quickly. In the chart builder, you’ll see four tabs: Design, Select Data, Customiser, and Preview. Let’s go through each to configure your WordPress chart.
In the Design tab, you’ll need to choose the format of your WordPress chart type. There are several options available. More options will appear below once you choose a format. After configuring the options, click the blue Select Data button to save and move to the next tab.
The Select Data tab is where you’ll map the individual elements of your chart. On a bar graph, for instance, you’ll need to declare which value appears on each axis. Click the Customiser button when you’re finished.
The Customiser tab is where you configure the chart’s design. How you customise these settings will depend on the design of your website and where you intend to display the form. We recommend configuring the colors to match your site’s theme. Click the Preview button when you’re finished.
As you can imagine, the Preview tab is a visualizer where you can preview your chart before publishing it. Use this opportunity to ensure that it displays data correctly and looks professional. If you aren’t happy with the chart, you can always navigate back to other tabs and make changes. Once you’re satisfied with the chart, click Update.
Step 5: Publish the WordPress chart to a page or post
In order to make your chart/graph visible on your site, you now have to add it to a page or post. Fortunately, this is super simple. There are two ways to do this.
The easiest way is to use the GFChart Gutenberg block. Click the plus icon and choose the Chart block. When the block appears in the content editor, use the drop-down menu to select the chart you just created.
If you don’t use the Gutenberg editor, you can embed a chart using a shortcode. GFChart generates a shortcode for each chart. Find your chart’s shortcode from the right side of the chart editor.
Then paste the shortcode into any WordPress editable section. You can add your chart to pages, posts, and even widget areas.
Step 6: Preview your page
Your final step is to view the WordPress chart on your page to ensure it looks correct. The chart itself will look exactly like its appearance in the chart builder’s preview tab, but you’ll need to make sure it fits well into your page design.
Best Practices for Creating WordPress Charts and Graphs
Now that you understand how to create a chart or graph in this chart plugin, let’s go over some best practices to make your data visualizations truly effective.
1. Limit yourself to the data points that serve the chart’s purpose
It may seem helpful to have lots of data points on the same chart, but too many can quickly become confusing, especially if some don’t relate to why the viewer is exploring the chart in the first place. Consider the person who will be consuming the data, their needs, and what will help them make decisions and take action.
2. Provide context for the chart/graph’s information
Don’t be afraid to add some supporting text below your chart to help the viewer understand. For instance, you might explain why a certain value is especially high or low. You could also help the viewer understand what steps they should take based on the chart’s information.
3. Avoid unnecessary styling or embellishments
Charts are the epitome of practicality. Don’t get fancy with unnecessary borders, colors, or design elements. Remove anything that doesn’t serve the chart’s purpose. In GFChart, you can make changes to your chart’s appearance by editing the settings in the Customiser tab (or version of a visualizer).
4. Use the right chart format for the job
When you build a graph or chart to display your data, choose the chart type that most accurately conveys the information. Bar graphs are best for comparing categories. Line graphs are used to show trends over time. A pie chart shows the relationship of categories in regards to the whole.
Depending your needs, you might use other obscure charts like a doughnut chart, radar chart, table chart, area chart, candlestick chart, polar chart (also known as a polar area chart), geo chart, gauge chart, scatter chart,
Using the right chart type will help your viewers understand the information intuitively.
5. Start your Y-axis at zero
This is called “zeroing your chart.” If the Y-axis of a bar graph doesn’t start at 0, it’s very easy to misrepresent your own data. For instance, this graph implies that the 2015 category is three times the size of the 2010 category. But it’s actually only 8.5% larger. It looks bigger because the Y-axis doesn’t start at 0.
6. Don’t be afraid to use a simple data table
Sometimes the best way to present data is not with a dynamic chart at all. Instead, a table may be your best option. This is especially true if your readers will use your presentation to look up specific values.
Choosing the Right WordPress Chart Type
The purpose of WordPress graphs and charts is to present information in a clear, visual way. These simple illustrations help readers understand the meaning behind your data so they can ultimately draw insights that lead to action. In many cases, data points in a table are meaningless until someone fashions them into a graph.
A bar chart or a line chart are the two most common ways to display data. These are staples of data visualizations that work in almost all cases (unless you have extremely specific needs).
Below we’ll explain the differences between bar graphs and line graphs in order to use them appropriately. We’ll also show you how to turn your Gravity Forms data into both types using GFChart, a WordPress plugin that helps you create your own charts and graphs.
What is a bar chart?
A bar chart uses rectangular blocks of different heights. The height of the block corresponds with the value of whatever quantity is represented. There are two kinds of bar graphs: vertical bar graphs and horizontal bar graphs.
A vertical bar graph (sometimes called a column chart) should be used whenever you have nominal categories, like age groups, months, salary ranges, or other groups that make the most sense when viewed sequentially. The following example places sequential categories on the horizontal and values on the vertical. Undoubtedly, you’ve seen plenty of these.
The sequential categories of a vertical bar graph should always be displayed in their natural order. It would be confusing, for instance, if the months of the year were listed out of order.
A horizontal bar graph is best used when the categories are nominal (meaning there’s no clear order to them; they can be listed in any way), such as ice cream flavors, sales team members, revenue sources, etc. The values are represented on the horizontal axis. Here’s an example.
Don’t worry too much about that distinction. Choosing the right bar graph orientation will add clarity to your data visualization, but only a little. In most cases, either orientation will do.
When to use a bar graph
The flexibility of bar graphs means they’re useful in countless situations as long as you can divide your data into neat categories so that each bar has a clear meaning.
For instance, if your bars are labeled with the months of the year, it would be inappropriate to divide one of those months into smaller groups (e.g. April, May, June 1-15, June 16-30, July, August…). Similarly, if you were showing the revenue of different companies, you wouldn’t give “Acme Inc” and “Acme Inc sales department” their own bars. That breaks the reader’s ability to grasp the distinctions between each category.
If you think the reader would also like to know the percentage relationship between categories on a bar graph, opt for a pie chart instead. A pie chart shows how each category relates to the whole. For instance, knowing the vote totals of each candidate in an election is helpful, but the percentage each candidate won of the electorate is more valuable.
Bar graphs should be scaled to zero. This means the axis with values should start at zero and extend at least as high as the biggest category. This is important because the area of each bar implies volume. Whatever you’re measuring is represented by the bar, so it’s appropriate to display the entire bar.
What is a line chart?
On a line chart, we plot individual points on the two axes and join them with straight lines. The vertical axis can represent any kind of value. The horizontal axis, however, should almost always represent time or some quantity that increases sequentially (like distance, age, stage of a project, etc.).
Line graphs are especially good at illustrating changes and trends. The lines between the individual points help us understand how those points change.
In the image above, for example, the red line shows that the percentage of U.S. households who earn less than $10,000/year has fallen over time. The decrease is too slight to see if we were looking at non-visualized data points in a table, but the line graph illuminates the trend.
Line graphs are adept at showing numerous quantities over time by using multiple lines. This is great if you want to compare the change in one category versus the change in other categories.
When to use a line graph
Line graphs are best for showing changes over time. They are less versatile than bar graphs (because one axis has to be time), but their ability to show the direction of trends is unparalleled, especially when the changes are slight.
Since a line graph shows the changes in data points over time, it doesn’t represent volume. This means you don’t have to scale the graph to zero. If the lowest value on the vertical axis is 20, it’s fine to start the axis at 20 and extend it to the highest value. (Realistically, however, you would start the axis lower than 20 so there’s some whitespace, but you get the idea.)
Graphing in GFChart and Gravity Forms
Building your own bar graph or line graph from a Gravity Form is simple with GFChart, a WordPress charts and graphs plugin. If you don’t have GFChart yet, grab yours today.
Before you get started, you’ll need to set up a Gravity Form and submit some entries. If you’re a Gravity Forms plugin user, you may already have some existing forms with entries.
To create a graph for your form, click Chats/Calculations in your WordPress backend. This will take you to GFChart’s graph builder. Click Add New to get started.
Give your new WordPress chart a name. Use something you’ll remember to distinguish it from other forms. Next, select the Gravity Form from which it will pull data. Then click Create Chart/Calculation.
Now it’s time to build your graph!
- In the Design tab of the chart configuration editor, choose the Bar option, its orientation, and its legend position.
- On the Select Data tab, assign the X-axis (you categories) and any other features that suit your needs.
- On the Customiser tab, give the chart a title, size, and label.
- The Preview tab will (as you can probably guess) give you a preview of your chart. If you aren’t happy with its appearance, you can always navigate back to the other tabs to make tweaks until you’re happy with it.
Displaying your chart is just as easy. Simply grab the shortcode from the right side of the chart editor and paste it into any page or post using Gutenberg’s shortcode block.
Creating a line graph follows the same process except you’ll choose the Time option on the Design tab and choose Line for the Display Type.
Which is right for you? Line chart or bar chart?
When you choose a type of graph to display your data, the best solution is the one that accurately conveys the information. Line graphs are best for plotting points over time. Bar graphs are best for comparing distinct categories.
That said, don’t bind yourself to hard rules. There are always exceptions. Your goal is to format your data in a manner that’s easily digestible for the reader without sacrificing accuracy or reliability. Sometimes that requires an unconventional approach, depending on the type of data you’re trying to display.
Wrapping Up
Data visualizations like WordPress charts and graphs are almost always more effective than raw data. Follow the steps and best practices we outlined above (and using the WordPress plugins we recommend) to create visualizations from your forms data. Your team, readers, fans, stakeholders, or anyone else who views your content will thank you.
GFChart is a WordPress plugin that helps web designers and business owners save time and produce great content by turning your Gravity Forms data into high-quality WordPress charts and graphs. Download GFChart today.