Create a radar chart profile based on form scores

Create a radar chart profile based on form scores

We received many queries concerning the creation of a radar chart based on different number fields inside the form (sometimes hidden computed fields with a float value). The goal is to make available for your users a sort of profile test (auto evaluation test) online (a specific form) in order to display at the end (on the confirmation page, or even sent by email) a radar chart summing up the profile of the user : the user submission being considered as the dataset for the radar chart, and each specified (included) fields corresponding to a dimension of the radar chart. Let’s see how to do this!

 

Create a auto-evaluation form

Simply create a new form, creating 5 different number type fields, just to test. Those fields could be visible, if the user is intended to type a value inside the input field, or it could be hidden if you want for example to make a specific computation of a score, based on other previous field values. It’s up to you.

Each field title will correspond to a new axis title in the final radar chart. And of course the value of the field will be set on this axis. If you want to enable calculation on any field, you can do it by checking the following box and writing a formula:

Write your shortcode

Fill the form at least once in order to have an entry to display, then write the shortocode to display the radarIt should be something like this:

[gfchartsreports gf_form_id="your_gform_id" height="500px" gf_entry_id="last" count_answers="1" group_fields="1" include="your_coma_separated_list_of_fields" type="radar"]

Create your first MaxiChart

Set your own title

using parameter : chart_js_options
[gfchartsreports gf_form_id="18" height="500px" gf_entry_id="last" count_answers="1" group_fields="1" include="1,2,3,4,5" type="radar" chart_js_options="title: {display: true, text: 'My Great Online Test', fontSize:28,fontFamily:'Arial',fontColor:'#8a0b45',fontStyle:'bold',padding:20},legend: {display: false}"]

Create your first MaxiChart

Set your own scale

using chartjs options : scale: { ticks: { beginAtZero: true,max: 10 } }

[gfchartsreports gf_form_id="18" colors="#8a0b45" height="500px" gf_entry_id="last" count_answers="1" group_fields="1" include="1,2,3,4,5" type="radar" chart_js_options="title: {display: true, text: 'My Great Online Test', fontSize:28,fontFamily:'Arial',fontColor:'#8a0b45',fontStyle:'bold',padding:20},legend: {display: false},scale: { ticks: { beginAtZero: true,max: 10 } }"]

Create your first MaxiChart

Noticed we’ve also added colors="#8a0b45" to the shortcode in order to change radar color ?

Ok but how to show the chart on the confirmation page?

Good question!
In fact you have to use a gravity forms merge tag, as explained here.

Ok, but what if i want to send this by email to customer?

Oh oh, good idea again! You will then have to use our brand new maxicharts pdf plugin (still in beta) : MaxiCharts Gravity PDF Integration

You can test it right here, right now

Auto-evalution test

A test form to demo the creation of a radar profile for user submission
  • Enter your email to receive this chart inside a PDF attachement 🙂

«
»

About The Author

Comments (2)

  • Luigi Pirandello

    how we can customize dataset label with creation date?

    • Luigi Pirandello

      Solution:

      1) used shortcode
      [gfchartsreports gf_form_id="2" datasets_field="date_created" include="23,30,31,44,49,68,75" gf_entry_id="" type="radar" width="100%" height="300px" data_conversion="%" group_fields="1" mode="" custom_search_criteria='{"status":"active","field_filters":{"0":{"key":"created_by","value":"user:ID"}}}' chart_js_options="title: {display: true, text: 'Chart Title'}" /]

      2) fix to mcharts_gf_source_add_on.php file of maxicharts-gravity-forms-source-add-on:

      $atts = shortcode_atts($defaultsParameters, $atts);
      ‘…
      // Fix START
      $datasets_field = trim( $atts[‘datasets_field’] );
      // Fix END
      $type = trim( $atts[‘type’]);
      …’