Improved WordPress Graphs for your Forms

As I assist Formidable Pro users at our help desk, recurring needs and patterns come to my attention. Over the past few months, I noticed Formidable's graphs were getting quite, well, dusty. So I rinsed them off, scrubbed them down, and polished them up. Now your WordPress graphs will really shine. Personally, I am much more likely to use and recommend our graphs now. Want to see why?

The new look

Our color scheme has been revitalized so the default graphs don't look so...last century.

• x_slanted_text
• colors (updated)
• title_bold
• title_color
• legend_size
• legend_position
• x_title_size, y_title_size
• x_title_color, y_title_color
• x_labels_size, y_labels_size
• x_text_angle
• x_show_text_every
• x_min and x_max
• is_stacked
• curve_type
• chart_area
• no_data

This list may not mean much to you at this point, so I would recommend checking out the docs if you would like to learn more about these new options. We're in the process of updating our documentation so if you don't see all of the options listed, just check back in a couple of days.

One of the most highly requested options included in the list above is the colors parameter. You can now make each bar a different color in your graphs (yay!).

Oh, and tooltip wrapping happens automatically now! You no longer have to worry about your long tooltips getting cut off.

Graph filtering

The ability to filter by a start and end date is a highly requested graph feature that is now available. You can use x_greater_than="2016-01-01" or x_less_than="2016-04-01" where x is the ID of a date field in your form. This also applies to the frm-stats shortcode.

New graph types

On top of the new graph options and filters, a handful of new graph types have been added to your toolbox.

My personal favorites

There are three specific graphs that offer especially useful snapshots of the activity in your forms. Let me tell you about them.

Pie graph of selections

This is a pretty basic graph, but it's very helpful. If you have a Dropdown, Checkbox, or Radio Button, then you can easily see which options are getting selected most. Maybe you're taking a poll asking which state your users are from? Whatever it is, you can get a quick glimpse at what users are selecting.

The shortcode:

[frm-graph fields="x" type="pie" title="Pie Chart" show_key="1"]

The graph:

Entries over time

The form parameter is a new option as of 2.02.05. Instead of graphing a specific field, you can graph all submissions in a form using form="x". In this particular example, I group by month, but you can also group by quarter or year. You can even remove the group_by parameter to show daily entries.

The shortcode:

[frm-graph form="x" title="Submissions over time" type="line" group_by="month" x_slanted_text="0"]

The graph:

Submissions by country

This is a nifty graph that can be used to see where your form submissions are coming from. If you have a Country dropdown field in your form, then you can create a geographical chart like the one below.

The shortcode:

[frm-graph fields="6817" type="geo" colors="#2A48F4,#1DA7F0,#1AEFE9,#16EE97,#13EC44,#80EA0C,#D2E809,#E7AA06,#E65303,#E50005"]

The graph:

For developers

As I updated the code behind the graphs, I added a hook to make sure the graph data is fully customizable. The frm_graph_data hook can be used to customize the values and labels in your graphs. We're in the process of adding documentation for this new hook, but in the mean time, let us know if you have any questions!

What's next?

I'm thinking about incorporating Google's material charts into a future release. Check out their material bar charts. If there is anything in particular that you would like to see added to the graphs, let me know! Just create a suggestion in our help desk so I can hear about your ideas.