ChartJS with Formidable Forms?

By: Theo Lee | Asked: 09/19/2022
ForumsCategory: Code HelpChartJS with Formidable Forms?
Theo Lee asked 2 years ago

Hi

I'd like to use ChartJS to create more advanced charts and graphs and have hit a complete block.

I have a form which collects the time a user wakes up in the morning; and would like to get this data in a chart.

Up the Y axis I'd like to have the hour they wake up - and along the X axis I'd like to have the dates over the past 7 days.

I'm using a filter to only display results by the current user so they can only see their entries.

Is there a way to use ChartJS with formidable forms?

Is it possible using the Views?  

My data for chartjs would be something like

var data_for_bar = [3, 10, 5, 2, 20, 63];
1 Answers
Victor Font answered 2 years ago
ChartJS integrates with Formidable Forms nicely. Here's an example of one that retrieves it's data from Formidable and calculates future value in a dynamic bar chart: https://formidable-masterminds.com/create-interactive-graphs-with-chart-js-and-formidable/

Yes, you can use views. ChartJS requires 2 things, custom HTML to display the chart, and custom jQuery to configure the Chart and retrieve that data from Formidable. Chart JS requires specialty developers. Almost everything you do in ChartJS is in jQuery. The rendered chart is an HTML canvas element that requires pixel-level calculations to render custom objects, which you can do with ChartJS. An array of data elements will not be a challenge.    The ChartJS channel on YouTube has great tutorials if you want to learn ChartJS for yourself. https://www.youtube.com/c/ChartJS-tutorials

You can also visit https://formidable-masterminds.com/developers-directory/ to find assistance from an available developer.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right