Extends MaxiCharts to chart Gravity Forms data.

maxicharts

MaxiCharts

Create beautiful HTML5 charts from Gravity Forms submission data with a simple shortcode. You can also visualise CSV files as graphs.

termel

Extends MaxiCharts to chart Gravity Forms data with a simple shortcode. Requires installation and activation of free <a href="https://wordpress.org/plugins/maxicharts/" title="MaxiCharts" rel="ugc">MaxiCharts</a> plugin. And of course Gravity Forms.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/ZcKpVkDNYIM?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<a href="https://maxicharts.com/random-demos/" title="Demonstration" rel="nofollow ugc">>> Demonstration site <<</a>
All code has been moved to GitHub now : <a href="https://github.com/Maxicharts" rel="nofollow ugc">MaxiCharts on Github</a>
<h3>Usage</h3>
Use the post visual editor brand new button to add the as many shortcodes as you want in a few clics !
the shortcode is
<pre><code>[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"]
</code></pre>
where all parameters are optional:
<ul>
<li>gf_form_id : expects the form ID in Gravity Forms (defaults to first form : id=1)</li>
<li>type : is the type of graph, at the moment only line,pie,doughnut,bar,horizontalBar available (defaults to pie)</li>
<li>include : expects the field ids to include (example : <code>include="1,3,4"</code>)</li>
<li>exclude : expects the field ids to exlude (example : <code>exclude="2,4,6"</code>)</li>
<li>colors : to use your custom colors : a list of <a href="https://maxicharts.com/custom-colors/" rel="nofollow ugc">coma separated hex colors</a></li>
<li>color_set : expects the name of the color set : blue,green,red,orange,purple (defaults to a standard color set including different colors)</li>
<li>color_rand : expects true or false and randomizes colors in color set if true (defaults to false)</li>
<li>…</li>
</ul>
see <a href="https://maxicharts.com/all-shortcode-parameters/" title="All parameters" rel="nofollow ugc">all parameters on demonstration site</a>
<h3>Examples</h3>
Display all fields of form #1 as pie charts with custom <a href="http://www.chartjs.org/docs/#chart-configuration-creating-a-chart-with-options" rel="nofollow ugc">chartjs options</a> for titles:
<pre><code>[gfchartsreports chart_js_options="title: {display: true, text: 'My Funky Chart Title', fontSize:28,fontFamily:'Arial',fontColor:'#00B88A',fontStyle:'bold',padding:20}"]
</code></pre>
Displays fields 4, 7 and 18 of gravity form #3 with bar charts. Default colors used.
<pre><code>[gfchartsreports gf_form_id="3" include="4,7,18" type="bar"]
</code></pre>
Displays field 2 of gravity form #2 with default pie chart. Use red color set, with not randomization.
<pre><code>[gfchartsreports gf_form_id="2" include="2" color_set="red"]
</code></pre>
Displays all but fields 4,7,18 of gravity form #8 with horizontalBar type charts. Use blue color set, randomized.
<pre><code>[gfchartsreports gf_form_id="8" exclude="4,7,18" color_set="blue" color_rand="true" type="horizontalBar"]
</code></pre>
Test it live here : <a href="https://maxicharts.com/random-demos/" title="Demonstration" rel="nofollow ugc">>> Demonstration site <<</a>

MaxiCharts Gravity Forms Source add-on

So cool to graph everything in Gravity Forms for free!

Alternatives to MaxiCharts Gravity Forms Source add-on

Top alternatives