Insert a Graph

Display a graph of your form's entries on any page, post, View, widget, etc. These graphs display live data and update automatically whenever an entry is added or updated. Check out your form's Reports tab to see the default graphs for your form. Our graphs rely on the Google chart HTML5/SVG technology.

Use the shortcode builder

1. Go into a WordPress page, post, or View.
2. Click on the 'Formidable' button above the content box.
   
3. Click the 'Graph' tab on the left side of the pop-up.
4. Select the form and then select the field which holds the data you would like to display. Configure any other options that you would like.
   
5. Click the 'Insert into Post' button.

Please note that the shortcode builder does not include all the graph options. If you would like to see the many graph options available, please read more about the graph shortcode.

Insert the shortcode manually

Insert the following shortcode on any page, post, View, widget, or inside an HTML field in a form.

[frm-graph fields="x,y,z"]

Replace x, y, and z with field IDs or keys. There are many parameters you can use to customize your graph. Read more about the graph shortcode.

Graph shortcode

The graph shortcode is used to insert a graph on your site. Review the parameters below to learn about the many graphing options available to you.

Required parameters

One of the following parameters must always be included in your graph shortcode, but you may not use both parameters together.

• fields: The IDs/keys of the fields you would like to graph. You can graph a single field or multiple fields.
  

  [frm-graph fields="x,y,z"]

• form: The ID or key of the form you would like to graph.
  

  [frm-graph form="x"]

Graph types

Formidable Pro offers a variety of graphs designed to address your data visualization needs. The following graph types are available:

Use the type parameter to determine your graph type. If no graph type is specified, a column graph will be created.

Column

A column graph consists of vertical columns or bar.

[frm-graph fields="x" type="column" title="column"]

Horizontal bar

A horizontal bar graph consists of horizontal columns or bars.

[frm-graph fields="x" type="hbar" title="hbar"]

Pie

A pie graph is a circle divided into sectors that each represent a proportion of the whole.

[frm-graph fields="x" type="pie" title="pie"]

Line

A line graph consists of line segments that connect data points.

[frm-graph fields="x" type="line" title="line"]

Area

An area graph is a line graph with the area below the line filled in.

[frm-graph fields="x" type="area" title="area"]

Scatter

A scatter graph is a set of points plotted on horizontal and vertical axes.

[frm-graph fields="x" type="scatter" title="scatter"]

Histogram

A histogram graph consists of rectangles showing the frequency of data items in successive numerical intervals of equal size.

[frm-graph fields="x" type="histogram" title="histogram"]

Table

A table chart displays the submission totals in a table.

[frm-graph fields="x" type="table"]

Stepped area

An stepped area graph is an area chart which uses vertical and horizontal lines to connect the data points in a series forming a step-like progression.

[frm-graph fields="255" type="stepped_area" title="stepped_area"]

Geo

A geo chart is a map of continents with colors and values assigned to specific regions. Values are displayed as a color. This type will only work with a Country field, like a dropdown, Lookup field, or Dynamic dropdown.

[frm-graph fields="258" type="geo"]

Configure the x-axis

If you would like to configure the x-axis for your graph, you may use the parameters listed below. Please note: This can only be used with graph types that have horizontal and vertical axes.

• x_axis

  Use the x_axis parameter to define the x-axis with the ID of a second field from the same form. You can also use created_at or updated_at to graph entries over time.
  

  [frm-graph fields="x" x_axis="created_at"]

• include_zero

  When using date fields, created_at, or updated_at for the x_axis parameter, you can include all dates (between your start and end dates) on the x-axis, even if they don't have a submission on that date.
  When using radio, checkbox, or dropdown fields, options that not yet been selected in an entry will also be included in the graph.
  

  [frm-graph fields="x" x_axis="y" include_zero="1"]

• group_by

  Group entries by month, quarter, or year. This parameter will only apply if x_axis is included.
  

  [frm-graph fields="x" x_axis="created_at" group_by="month"]

• is_stacked

  Place related values atop one another. If there are any negative values, they are stacked in reverse order below the chart's axis baseline. Please note: This will only apply when graphing multiple fields. This parameter will only apply if x_axis is included.
  

  [frm-graph fields="x,y" x_axis="created_at" is_stacked="1"]

• data_type

  Specify whether to display the number of entries, the total the values of those entries, or the average of the entries. Use 'count' to display the number of entries, use 'total' to display the sum of the specified field's values, or use 'average' to display the average of the specified fields' values. This parameter will only apply if x_axis is included.
  

  [frm-graph fields="x" x_axis="y" data_type="total"]

X-axis display options

Use the parameters below to customize the display of your graph's x-axis. These parameters will only apply to graphs with a horizontal and vertical axis.

• x_title

  Set the title of the x-axis.
  

  [frm-graph fields="x" x_title="X axis title"]

• x_title_size

  Set the font size of the x-axis title. This parameter will only apply if x_title is included.
  

  [frm-graph fields="x" x_title="X axis title" x_title_size="20"]

• x_title_color

  Set the font color of the x-axis title. This parameter will only apply if x_title is included.
  

  [frm-graph fields="x" x_title="X axis title" x_title_color="#666"]

• x_labels_size

  Set the font size of the labels on the x-axis.
  

  [frm-graph fields="x" x_labels_size="15"]

  Hide the x axis labels by setting the size very small:
  

  [frm-graph fields="x" x_labels_size="0.1"]

• x_slanted_text

  By default the labels on the x-axis are slanted. To remove the slant and make the labels horizontal, use x_slanted_text=0.
  

  [frm-graph fields="x" x_slanted_text="0"]

• x_text_angle

  Set the angle of the slanted text labels on the x axis.
  

  [frm-graph fields="x" x_text_angle="80"]

• x_show_text_every

  Determine how often an x-axis label should be displayed. If you would like to show the x-axis label for every bar or coordinate, use x_show_text_every="1". If you would like to show the x-axis label for every three bars or coordinates, use x_show_text_every="3".
  

  [frm-graph fields="x" x_show_text_every="3"]

• x_min

  Set the minimum value of the x-axis.
  

  [frm-graph fields="x" x_min="5"]

• x_max

  Set the maximum value of the x-axis.
  

  [frm-graph fields="x" x_max="10"]

• x_order

  Determine the order for your x-axis labels. By default, a field's options will be graphed alphabetically. You may reverse this order with x_order="desc". If you're graphing a checkbox, dropdown, or radio button field and you would like to remove alphabetical ordering, add x_order="field_opts" to your graph shortcode. When you remove alphabetical ordering, the options will be graphed in the same order as your field options.
  

  [frm-graph fields="x" x_order="field_opts"]

Y-axis display options

Use the parameters below to customize the display of your graph's y-axis. These parameters will only apply to graphs with a horizontal and vertical axis.

• y_title

  Set the title of the y-axis.
  

  [frm-graph fields="x" y_title="Y axis title"]

• y_title_size

  Set the font size of the y-axis title. This parameter will only apply if y_title is included.
  

  [frm-graph fields="x" y_title="Y axis title" y_title_size="20"]

• y_title_color

  Set the font color of the y-axis title. This parameter will only apply if y_title is included.
  

  [frm-graph fields="x" y_title="Y axis title" y_title_color="#666"]

• y_labels_size

  Set the font size of the labels on the y-axis.
  

  [frm-graph fields="x" y_labels_size="15"]

• y_min

  Set the minimum value of the y-axis.
  

  [frm-graph fields="x" y_min="5"]

• y_max

  Set the maximum value of the y-axis.
  

  [frm-graph fields="x" y_max="10"]

Title display options

Use the parameters below to customize the display of your graph's title. These parameters will not apply to geo graphs.

• title

  Set the graph title.
  

  [frm-graph fields="x" title="My Graph"]

• title_size

  Set the font size of your graph title.
  

  [frm-graph fields="x" title_size="20"]

• title_font

  Set the font family of your graph title.
  

  [frm-graph fields="x" title_font="Lucida Sans Unicode"]

• title_bold

  Make the graph title bold with title_bold="1".
  

  [frm-graph fields="x" title_bold="0"]

• title_color

  Set the color of the graph title.
  

  [frm-graph fields="x" title_color="#666"]

• truncate

  Truncate the graph title to the specified number of characters. This parameter will only apply if the default graph title is used.

  [frm-graph fields="x" truncate="20"]

Display options

For display options of your graph, use the parameters below.

• colors

  Customize the graph colors with a comma separated list of 6-digit hex colors
  

  [frm-graph fields="x" colors="#EF8C08, #21759B, #1C9E05"]

• bg_color

  Change the background color.
  

  [frm-graph fields="x" bg_color="#FFFFFF"]

• grid_color

  Change the color of the horizontal lines on the graph.
  

  [frm-graph fields="x" grid_color="#000000"]

• x_grid_color

  Change the color of the vertical lines on the graph.
  

  [frm-graph fields="x" x_grid_color="#ffffff"]

• height

  Set the graph height. If not specified, this defaults to 400.
  

  [frm-graph fields="x" height="200"]

• width

  Set the graph width to pixels or a percent. If not specified, this defaults to 400.
  

  [frm-graph fields="x" width="25%"]

• chart_area

  Set the placement and size of the chart area to pixels or a percent.

  [frm-graph fields="x" chart_area="height:100%, width:100%, top:10, left:20"]

• is3d

  Turn your graph three-dimensional. This option is only available for pie graphs.
  

  [frm-graph fields="x" type="pie" is3d="true"]

• pie_hole

  Turn your pie graph into a donut graph. This option accepts values between 0 and .9, corresponding to the ratio of the donut hole to the chart.
  

  [frm-graph fields="x" type="pie" pie_hole=".5"]

• curve_type

  Smooth the lines of a line graph.
  

  [frm-graph fields="x" type="line" curve_type="function"]

• no_data

  Determine the message that will display when there is no data to be shown on the graph.
  

  [frm-graph fields="x" no_data="There is no data to display"]

• pagesize

  Add pagination when using the table graph type.
  

  [frm-graph fields="x" type="table" pagesize=20]

• sort_column

  Change the column to sort by on page load when using the table graph type. 0 is the first column and 1 is column 2.
  

  [frm-graph fields="x" type="table" sort_column=1]

• sort_ascending

  Change the sorting order on page load when using the table graph type.
  

  [frm-graph fields="x" type="table" sort_ascending=1]

Legend options

Include a legend for your graph. This is most helpful if you are graphing multiple fields on the same graph. Use the parameters below to configure your legend.



• show_key

  Display a legend with your graph.
  

  [frm-graph fields="x" show_key="1"]

• legend_position

  Change the position of the legend using top, bottom, left, or right. This parameter will only apply if show_key is included.
  

  [frm-graph fields="x" show_key="1" legend_position="top"]

  Please note when using the 'left' position, it will only show up on the pie and geo charts.

• legend_size

  Change the size of the legend in pixels. This parameter will only apply if show_key is included.
  

  [frm-graph fields="x" show_key="1" legend_size="20"]

• tooltip_label

  Change the default tooltip label for a graph. The tooltip label defaults to the field title.
  

  [frm-graph fields="x" show_key="20" tooltip_label="Submissions"]

Filtering parameters

Use the parameters below to filter and limit the data displayed in your graph.

• user_id

  Graph entries for a specific user or for the current logged-in user. Insert the ID of a specific user or use 'current' to only graph data from the current user.
  

  [frm-graph fields="x" user_id="current"]

• entry

  Display a graph of a specific entry or entries. You may use entry IDs or keys.
  

  [frm-graph fields="x" entry="41245,28374,28498"]

• drafts

  By default, the frm-graph shortcode does not include draft entries. You can choose to include only drafts using drafts="1", or both drafts and entries using drafts="both".
  

  [frm-graph fields="x" drafts="both"]

• created_at_greater_than

  Only include entries created after a specific or dynamic date. For example, you may show entries created in the last month with created_at_greater_than="-1 month" or use a specific date like created_at_greater_than="2016-07-31". When using a specific date, it must be in the Y-m-d format.
  

  [frm-graph fields="x" created_at_greater_than="Y-m-d"]

• created_at_less_than

  Only include entries created before a specific or dynamic date. For example, you may show entries created before today with created_at_less_than="-1 day" or use a specific date like created_at_less_than="2016-05-31". When using a specific date, it must be in the Y-m-d format.
  

  [frm-graph fields="x" created_at_less_than="-1 month"]

• limit

  Limit the number of bars, coordinates, or pie slices displayed in the graph. This will limit the graph to the highest values.
  

  [frm-graph fields="x" limit="5"]

• field is equal to

  Only include entries where another field in the form has a specific value. For example, you may want to only graph entries where your Terms and Conditions field has a value of 'Yes'.
  

  [frm-graph fields="x" y="Yes"]

  Replace y with a field ID or key.

• field is NOT equal to

  Only include entries where another field in the form is NOT equal to a specific value. For example, you may want to only graph entries where a status field does NOT have a value of 'Pending'.
  

  [frm-graph fields="x" y_not_equal="Pending"]

  Replace y with a field ID or key.

• field is greater than

  Only include entries where another field in the form is greater than a specific value. For example, you may want to only graph entries where a date field has a value greater than 2016-01-01.
  

  [frm-graph fields="x" y_greater_than="2016-01-01"]

  Replace y with a field ID or key.

• field is greater than or equal to

  Only include entries where another field in the form is greater than or equal to a specific value. For example, you may want to only graph entries where a date field has a value greater than or equal to 2016-01-01.
  

  [frm-graph fields="x" y_greater_than_or_equal_to="2016-01-01"]

  Replace y with a field ID or key.

• field is less than

  Only include entries where another field in the form is less than a specific value. For example, you may want to only graph entries where a date field has a value less than 2017-01-01.
  

  [frm-graph fields="x" y_less_than="2016-01-01"]

  Replace y with a field ID or key.

• field is less than or equal to

  Only include entries where another field in the form is less than or equal to a specific value. For example, you may want to only graph entries where a date field has a value less than or equal to 2017-01-01.
  

  [frm-graph fields="x" y_less_than_or_equal_to="2016-01-01"]

  Replace y with a field ID or key.

• field contains

  Only include entries where another field in the form contains a specific value. For example, you may want to only graph entries where a checkbox contains the value "Morning".
  

  [frm-graph fields="x" y_contains="Morning"]

  Replace y with a field ID or key.

Styling Graphs

Since our graphs rely on Google charts HTML5/SVG technology, you can refer to their documentation on specific styling questions.

If you're familiar with PHP, you can use the frm_google_chart hook to add or change the options in your Google chart.

Examples

Stepped area totals

Create a stepped area graph with type="stepped_area". Set an x-axis with the x_axis parameter and graph field totals with the data_type parameter.

[frm-graph fields="254" x_axis="253" type="stepped_area" title="My Graph" x_title="X axis title" y_title="Y axis title" data_type=total bg_color="#ebf0fa" colors="#FF0000" grid_color="#9900cc"]

Colorful columns

Set custom colors in a graph using the colors parameter.

[frm-graph fields="255" type="column" title="Favorite Color" colors="#21759B, #1C9E05, #EF8C08, #FF0000"]

Pie 3D

Create a pie graph and make it 3-dimensional using the is3d parameter. Also, move the legend to the left side of the graph using the legend_position parameter.

[frm-graph fields="255" width="100%" title="My Pie Graph" type="pie" show_key="1" legend_position="left" is3d="true"]

Donut chart graph

Create a donut chart. Customize the size of the hole by using the pie_hole parameter.

[frm-graph fields="255" type="pie" pie_hole=".4" title="" show_key="1" legend_position="bottom"]

Smooth line graph

Create a line graph with smooth lines using the curve_type parameter. Also make the labels on the x-axis horizontal by using the x_slanted_text parameter.

[frm-graph fields="253,255,256" x_axis="created_at" x_slanted_text="0" type="line" curve_type="function" width="100%" chart_area="height:40%,width:60%" title="Curve Line Graph" title_bold="true" show_key="1" legend_size="20" y_title="# of Submissions" x_title="Date Created"]

Geo chart

Create a geo chart and select the colors you would like using the colors parameter.

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

• Art Contest Results
• Survey Results

PHP Alternative

If you would like to insert a graph with PHP, you may use the code below.

echo FrmProGraphsController::graph_shortcode(array('fields' => x));

All shortcode parameters from above can be used in this function.