Create Interactive Graphs with Chart.js and Formidable


A client submitted a Project Application that requested:

  • the creation of an interactive bar chart to calculate and display future values in real time when a "Risk" dropdown is changed on a form
  • the Risk dropdown's selected option changes color and the interactive chart uses the same color as the Risk option
  • interactive colors and interest rates are dynamic and stored in a look up table

Demo Form

This demo form is the result:

Interactive Chart Prototype
Min: $10,000 / Max: $100,000 / Incr: $1,000
Min: $1,000 / Max: $10,000 / Incr: $500


The chart is an HTML Canvas object that displays in an HTML field. The chart is generated with the Chart.js jQuery library. Chart JS works equally well whether the output is displayed on a view or form.

Initial Deposit and Monthly Contribution Amount are custom slider fields. How to customize these fields to display as currency is explained in the Display Range Slider as Currency post.

The "Risk" dropdown is a standard dropdown field that is populated dynamically from a lookup table with the frm_setup_new_fields_vars filter.

Why use a standard dropdown instead of a dynamic or lookup field? Because the standard dropdown field supports separate values and the dropdown labels and values are provided by the lookup table.

The lookup table is a standard Formidable form consisting of 4 text fields, class name, color value, dropdown label, and interest rate.

Form styling is built on the fly in PHP and injected into the page through the WordPress wp_head action.

jQuery drives the interactive elements and refreshes the chart with new values when the dropdown field's change event fires.

PHP Source

jQuery Source

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *