Creating a chart based on Radio answers

Hi @madoxx,

Although Forminator doesn’t natively support complex calculations or integration with wpDataTables in the way you need, you can use a combination of plugins and custom code to achieve what you’re seeking.

Here’s a simplified summary of steps you may want to take:

1. Forminator: Use the Forminator plugin to create a form similar to your description. You can create fields for the 40 questions and divide them into 10 areas.
2. Form Submissions: Each form submission is stored in the database with the set of answers. The trick here is that the each radio button’s value can be assigned a point value, so when a user selects an answer, that point value gets stored as the answer.
3. Custom Calculations: After the form is submitted, a custom PHP function hooked to the Forminator submission event can take over. This function would extract the answers, sort them by area, add up the points for each area, and then store that area score.
4. wpDataTables: You can create a new table in wpDataTables that matches the structure needed for your results. Each time a form submission occurs and the area scores are calculated, your custom function can also update this wpDataTables table with new score results.
5. Displaying the Chart: wpDataTables has functionality to create charts based on table data and supports Polar Area Chart. Once your area scores have been populated, build your chart and embed it on your results page.

This process may take some custom coding, linked to the form submission hook, to extract answers, calculate the results based on your scoring system, and update a wpDataTables table which is out of our scope of support we can provide here. You may need a proficient WordPress developer to assist you.

Please also note that while this approach should work in theory, it might require adjustments and troubleshooting depending on your specific setup.

Kind regards,
Zafer

Hi @wpmudevsupport15

Thank you for your resourceful answer!
Is there a way to make the process simpler by utilizing this plugin: https://www.ads-software.com/plugins/wpdatatables-forminator/

Thanks in advance!

Hi @madoxx

You need this this plugin anyway as it is necessary for the integration between Forminator and wpDataTables. But it’s only a “connector” and it doesn’t help or make it “easier” to set it up.

However, after reading your initial request again I think custom code won’t be necessary here after all.

The process would be nearly the same as the one my colleague suggested earlier with just one exception – calculations.

Let me then describe it in more detailed steps below.

1. Create a table with your questions. You need to add as many “radio” fields to the form as questions you want to have there.

– in each “radio” field enable “calculations” option
– and there assign a value to each option

2. Now you need to add as many “calculation” type fields to the form as you have “areas”. Let’s say you have 10 areas – so you need 10 calculation fields on form.

3 give those calculation fields some labels like e.g. “Area 1 score”, “Area 2 score” and so on

4. now for each calculation field do this:

– switch to “Calculations” tab of the field and using + operator and blue icon for selecting fields simply set a sum of radio fields for Area 1 there;

– you basically need to click on a blue field selection icon, select one of the radio fields, click on + to add + operator, then click again on blue field selection icon, add next radio field and so on – until you have all the radio fields of the Area 1 added.

5. once you have all these calculations set, save the form and when you try to fill-in the form you’ll see that each calculation field shows calculated score, depending on the choices of radio in a given area.

I hope that makes sense so far.

Now the next step is the chart so you need both wpDataTables and that additional Forminator integration plugins active on site.

You also need to put the form on some page and submit it at least once (so there’d be submission data saved; otherwise you won’t be able to create wpDataTable for that form).

6. Then you go to “wpDataTables -> WPDataTables” page and click on “Add new”

– select “Create a data tabl elinked to an existing data source” option
– then select “Forminator Form” in “Input data source type” and select your form from “Choose a Forminator Form” drop-down that shows up
– and below that you’ll see “Choose feeds to show as columns” – use it to select your calculation fields (so your “Area 1 Score”, “Area 2 Score” and so on); you don’t need to choose any other form fields there
– and finally save changes.

At this point you have integration set between Forminator Form and wpDataTables so wpDataTables have access to and can process form data.

Next step is to create chart

7. Go to “wpDataTables -> wpDataCharts” and click “Add new”
8. Now you’ll need to select charts engine and that’s a bit tricky because:

– you mentioned “Polar area” charts
– and if you select “Google Charts” – there is no such char there
– if you select “Charts.js” – there is such chart there but it only takes two sources – and with your plan you’ll have 10 sources

This is, however, related to how these charts work and I’m not able to give you solution to that. I’m not sure if this is due to those charts scripts or a limitation of a free version of wpDataTables (you can ask wpDataTables support if there’s a way to add more than 2 columns as data source for Polar Area chart; maybe they know).

But in general, after you select chart engine and then chart type you’ll be asked to select “wpDataTable Data Source” so you select the table that you created in step 6.

And once that is selected, you’ll have all available columns (your “Area 1 Score”, “Area 2 Score” and so on) on the left so you need to add them to the list on the right.

Then you just save it and you have it all set.

Once you add chart shortcode somewhere on the page, you’ll have it show the chart with cumulative data (based on all submissions of the form; on calculated score).

—-

Note:

– this would work (I just tested it) and doesn’t require any custom coding
– but it will show a cumulative chart based on all form submissions
– if you need it to show chart for a specific single submissions only (e.g. submitting user data) – it’s not doable with a free version of the wpDataTables plugin; it’s their limitation and not ours – because you need to create a filter for the table that will only show specific submission data dynamically.

Best regards,
Adam

Hi @wpmudev-support8

Thank you for the efforts, I appreciate it!

I opened a thread on wpDataTables support forum.

Can you please post a screenshot of your Polar Area Chart with 2 columns? For me it displays only one value and the first column is skipped…

Edit: This is what I get when I import only 2 columns https://prnt.sc/xxEOf4TkL_ug

• This reply was modified 1 year ago by madoxx.

Hi @madoxx

Thanks for response!

Here is example from my test setup:

https://app.screencast.com/0kLSMC0ZuZHWj

Interestingly, it does show two “parts” of the chart and still labels them as “Area 2”. I didn’t really check it previously but now after making a few more test submissions of the form, it seems that this chart doesn’t really show “cumulative” data.

I had a bit better results using “bar” type charts with “enable grouping” option enabled but it seems like I might be missing something specific to how those charts in wpDataTables work. The data from the form is correctly passed to it and you can easily see it by looking at the data table itself – if enter editing it, at the very first screen you’ll have “Table preview and columns setup” section where you can see that data is correctly passed.

So that part works fine. Then the chart works based on that table so there is some “trick” in that area, on the line between table and chart.

I’m afraid I’m not really that much familiar with all the details of the wpDataTables plugin configuration (especially that’s a 3rd-party plugin) so it’s good that you also asked them. I hope they’ll be able to either provide solution or at least point us in a right direction.

Kind regards,
Adam

Hello @madoxx ,

Was wpDataTables support helpful? I will assume yes since it’s been a week since our last message.
So I will mark this topic as resolved.

kind regards,
Kasia

@wpmudev-support8 @wpmudev-support2

Thank you for your support!

For now, I’m still setting up my form in Forminator, then I’ll deal with the visualization.

I’m almost done, the only (and a big) issue now is that when I navigate between paginated pages, the loading is very slow (4 to 5 seconds).

I have 120 radio questions with 5 answers assigned to each one. On the last page, I’ve added calculation fields that make the average score for each paginated page. There are no photos or videos in the form. Only radio questions, page break (pagination with 12 pages) and calculations.

Is there any way to speed up the form? I’ve already tried AJAX loading, but it didn’t make any difference. In one of the threads I’ve read that the whole form is loaded at once (regardless the pagination) – if this is true is there any way to prevent it?

Finally, if there is no way to make the form faster, is there a way to add a loading indicator when clicking the Next or Previous button of the pagination in the form? This way the user would at least be informed that there is something happening.

EDIT: I’ve tried exporting the form to test it on another website without any additional plugins. I did a couple of times, and every time I import it Active Forms counter increases, but the imported form isn’t visible :/

The only visible one is the one I created with Create option.

https://prnt.sc/47WmIdghMUIP

EDIT2: I’ve also used https://unminify.com/ and https://jsonlint.com/ to validate the code, and it was OK.

EDIT3: The last piece of info – the form isn’t slow on iOS mobile devices, but it’s slow on Desktop and Android.

• This reply was modified 11 months, 2 weeks ago by madoxx.
• This reply was modified 11 months, 2 weeks ago by madoxx.
• This reply was modified 11 months, 2 weeks ago by madoxx.

Hello @madoxx

Hope you’re doing well. I am sorry to hear about the issue you are experiencing with the form.

We would like to take a closer look at the form and replicate the issue on our test site to see what could be causing the issue. Specifically, because it is causing slowness only on Desktop and Android devices.

For this, would you mind sharing the form export with us so that we can take a closer look? This will also enable us to check if the form is visible fine at our end after we import it.

You can follow the guide below on how you can export the Forminator form.
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

After exporting, please share the code using services such as https://pastebin.com or https://justpaste.it/ which are free to use.

Please feel free to remove any sensitive information the form might contain.

Awaiting your response.
Kind Regards,
Saurabh