MaxiCharts

Description

Create beautiful Chartsjs charts from Gravity Forms submission data or CSV data with a simple shortcode.
Use all your past data to visualize advanced statistics in a few clics. Please vote for next features you expect!

Tested up to Gravity Forms v2.3 beta 2

>> Demonstration site <<

Add-ons

Usage

Use the post visual editor brand new button to add as many shortcodes as you want in a few clics !
You need to install the core MaxiCharts plugin in any case, then if you use, for example Gravity Forms add-on, the shortcode processed is:

[gfchartsreports gf_form_id="form_id" include="fieldNb1,fieldNb2,fieldNb3,.." exclude="fieldNb4,fieldNb5,..." color_set="set" type="graphType" width="width(px|%)" float="true|false" chart_js_options="options"]

where all parameters are optional:

  • gf_form_id : expects the form ID in Gravity Forms (defaults to first form : id=1)
  • type : is the type of graph, at the moment only line,pie,doughnut,bar,horizontalBar available (defaults to pie)
  • include : expects the field ids to include (example : include="1,3,4")
  • exclude : expects the field ids to exlude (example : exclude="2,4,6")
  • colors : to use your custom colors : a list of coma separated hex colors
  • color_set : expects the name of the color set : blue,green,red,orange,purple (defaults to a standard color set including different colors)
  • color_rand : expects true or false and randomizes colors in color set if true (defaults to false)
  • width : set width of graph(s) in pixels or percent (width=”100%” or width=”250px”), height will be adjusted automatically
  • position : (defaults to none) can be float (sets float:left property to graph div container, and allow multiple column display) or center (to center graphs inside container)
  • maxentries : by default, maximum 200 entries are retrieved from the gravity forms database, increase at your own risk (performances)
  • chart_js_options : JSON like string like : title: {display: true, text: ‘My Funky Chart Title’}. Use to surround string parameters. See here for more informations
  • tooltip_style : Control tooltip content, SUM displays total count of answers, PERCENT the % ratio among all answers, and BOTH displays both 🙂
  • data_conversion : Set to “%” in order to convert in % all values. Previous parameter tooltip_style is disabled in this case.
  • case_insensitive : set it to “true” in order to count form answers values in a case insensitive way. For ex. : mYAnswer and myansWER will be count as same user answers.
  • custom_search_criteria : see here provide custom search criteria for gf submission query, for example custom_search_criteria='{“status”:”active”,”field_filters”:{“0”:{“key”:”created_by”,”value”:”current”}}}

Examples

Display all fields of form #1 as pie charts with custom chartjs options for titles:

[gfchartsreports chart_js_options="title: {display: true, text: 'My Funky Chart Title', fontSize:28,fontFamily:'Arial',fontColor:'#00B88A',fontStyle:'bold',padding:20}"]

Displays fields 4, 7 and 18 of gravity form #3 with bar charts. Default colors used.

[gfchartsreports gf_form_id="3" include="4,7,18" type="bar"]

Displays field 2 of gravity form #2 with default pie chart. Use red color set, with not randomization.

[gfchartsreports gf_form_id="2" include="2" color_set="red"]

Displays all but fields 4,7,18 of gravity form #8 with horizontalBar type charts. Use blue color set, randomized.

[gfchartsreports gf_form_id="8" exclude="4,7,18" color_set="blue" color_rand="true" type="horizontalBar"]

More examples here : >> Demonstration site <<

Screenshots

  • Chart report example 1
  • Chart report example 2
  • Chart report example 3

Installation

>> Demonstration site <<

Easy

  1. Search via plugins > add new.
  2. Find the plugin listed and click activate.
  3. Use the Shortcode

FAQ

Installation Instructions

>> Demonstration site <<

Easy

  1. Search via plugins > add new.
  2. Find the plugin listed and click activate.
  3. Use the Shortcode

Reviews

Great chart hub

Does the job pretty well using the excellent chartjs library!
Waiting for more charts connectors : d3js ?…. 🙂

Read all 1 review

Contributors & Developers

“MaxiCharts” is open source software. The following people have contributed to this plugin.

Contributors

Translate “MaxiCharts” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

>> Demonstration site <<

  • 1.0.7 – multisite management for button in editor

  • 1.0.6 – bug on tooltips

  • 1.0.5 – warning fixed : https://wordpress.org/support/topic/warning-missing-argument-1-3/

  • 1.0.4 – tinymce still bugs

  • 1.0.3 – random

  • 1.0.2 – tinymce bug fixed

  • 1.0.1 – logger issues fixed

  • 1.0 – First stable release.