How to Create a Calculator with Charts in WordPress

With Calculated Fields Form, you can create calculators and generate charts, pie charts, graphs, and other visual illustrations from the results for instance, I used the plugin to create the calculator below.

The graph is automatically updated as the results of the calculations change.

How to Create this Graph in WordPress

You need the Developer version of Calculated Fields Form to create charts and graphs.

Once you’ve installed the plugin, you have the option to build the calculator from scratch or download my template.

Here is the code that generates the chart below.

(function(){
    if(typeof CFFCHART != 'undefined')
    {
        var labels = [],
            datasets = [
                {label: 'Hair Care Cost', data:[], borderColor: '#022345', fill: false},
                {label: 'Balance', data:[], borderColor: '#C4EAF8', fill: false}
            ],
            principal_payments = [],
            r = fieldname2,   /* Annual Interest Rate 5% */
            n = fieldname3,   /* Compound Frequency */
            t = fieldname4,   /* Years of Growth */
            p = fieldname6,   /* Payment Frequency */
            d = new Date(),
            rate = Math.pow(1+r/n,n/p)-1;
            

        d.setDate(1);

        for(var i = 0; i <= p*t; i++)
        {
            labels.push(GETDATETIMESTRING(d, 'dd/mm/yyyy'));
            datasets[0]['data'].push(fieldname33+i*fieldname33);
            
            if(i)
            {
                switch(p)
                {
                    case 1:   d.setFullYear(d.getFullYear() + 1); break;
                    case 2:   d.setMonth(d.getMonth()+6); break;
                    case 4:   d.setMonth(d.getMonth()+3); break;
                    case 6:   d.setMonth(d.getMonth()+2); break;
                    case 12:  d.setMonth(d.getMonth()+1); break;
                    case 24:  if(i%2 == 0) d = EOMONTH(d1, c/2); else d.setDate(d.getDate()+14); break;
                    case 26:  d.setDate(d.getDate()+14); break;
                    case 52:  d.setDate(d.getDate()+7); break;
                    case 365: d.setDate(d.getDate()+1); break;
                }

                datasets[1]['data'].push(
                    datasets[1]['data'][i-1]+fieldname33+
                    ((n == 365) ? 
                    datasets[1]['data'][ic-1]*(POW(1+rate, DATEDIFF(labels[i-1], labels[i], 'd')['days'])-1 ) : 
                    datasets[1]['data'][i-1]*rate)
                );
            }
            else
            {
                datasets[1]['data'].push(fieldname1);
            }    
        }

        CFFCHART(
            'chart',
            {
                type:'line',
                data:{
                    labels: labels,
                    datasets: datasets
                },
                options:{
                    tooltips: {
				        callbacks: {
                            label: function(tooltipItem, data) {
                                return FORMAT(PREC(tooltipItem.yLabel,2), {prefix:"$", suffix:"", groupingsymbol:",", decimalsymbol:".", currency:true});
                            }
				        }
                    }    
			    }
            }
        );
    }
})()

This code would be placed in a calculated field. Remember that the variables in the codes need to be changed based on what you have in your calculator.

In a different HTM field, you will display the graph with a code:

<canvas id="chart" style="width:500px;heigth:500px"></canvas>

Check the video below to see how the backend of my chart looks like.