Slider

Create Interactive Graphs with Chart.js and Formidable

Requirement

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
50000
$50,000
Min: $1,000 / Max: $10,000 / Incr: $500
5000
$5,000

Mechanics

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

Display Range Slider as Currency

Summary

This snippet is an updated version of the example found on the Formidable Knowledge Base JavaScript examples page: https://formidableforms.com/knowledgebase/javascript-examples/#kb-format-a-slider-field-value-as-a-currency.

The KB example works for one slider at a time. This version works for multiple sliders on a single page. It also uses the JavaScript standard built-in Intl.NumberFormat object. This object enables language-sensitive number formatting.

To use this snippet, follow the same directions as found in the KB article with a couple of exceptions. The HTML needs to be modified to use the [key] shortcode to make the code generic, and the CSS needs to be modified to apply to multiple sliders.

For the custom HTML in Step 1, drop the following span into each slider on the page as instructed in the KB article directly after the [input] shortcode:

<span id="field_[key]_display" class="frm_range_value_currency">$50</span>

Demo Form

Multiple Range Slider Currency Demo
50
Min: 0 | Max: 100 | Incr: 1
Min: $1,000 | Max: $10,000 | Incr: $500
5000
$5,000
Min: $10,000 | Max: $100,000 | Incr: $1,000
50000
$50,000

Snippet

Here's the jQuery code that should be placed in the form's After Fields section on the Customize HTML page:

Final tips:

  • don't forget to add the multiple slider ids to the recommended CSS from the KB article. (Step 2)
  • the field descriptions for the demo sliders are moved to a position above the [input] shortcode on the form's Customize HTML page

CSS

Here's the modified CSS:

Customize HTML

Here's the modified HTML for the formatted sliders used in the demo form: