mm.js - Compound Interest Calculator Documentation

Embed a Compound Interest Calculator

mm.js - Compound Interest Calculator Documentation

The mm.js Compound Interest Calculator plots compounding interest over time, from a Lump Sum, Regular Contributions for a given Interest Rate and Term.

The Calculator can be used to show the power of Compounding.

The Calculator can also be used with negative Regular Contributions (i.e. Drawdown) to simulate different drawdown rates.

The Calculator is fully featured, enabling real time updates, sharing of the URL, and query parameters. You can embed on a single page or within articles.

How to Embed

If you are using WordPress use the HTML editor.

1. Include the required dependencies

Add the following scripts to your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://www.moneymage.net/mm.min.js"></script>

These are required dependencies for mm.js. They are all minified, compressed, and served via a reliable Content Distribution Network to improve your site speed.

2. Add HTML and containing divs to your page or article

You will need to insert some HTML and containing divs where the chart and table will appear.

2.a) Add the input form HTML

Insert HTML for the form.

An example layout is:

1. Starting Lump Sum Saving: (£) <input type="text" id="lump-sum" value="1000"/>

2. Monthly Savings: (£/month) <input type="text" id="monthly-saving" value="10"/>

3. Interest Rate (%): <input type="text" id="rate" value="1.4"/>

4. Years: <input type="text" id="years" value="25"/>

<input class="button" value="Recalculate" id="calculate" type="submit"/>
<input type="hidden" id="copy-value"/>
<input class="button" value="Copy Link" id="copy-link" type="submit"/>

You can lay the form out and label it as you please. The following must exist:

You can place this form whereever you like on your page. You can style this form however you like.

2.b) Add an error containing div and HTML

Insert HTML to handle errors with the form.

An example layout is:

<div id="error-report" style="display: none;">
<p>There was an error with your input. Please try values like:</p>
<ul>
    <li>Lump Sum = 1000</li>
    <li>Monthy Savings Rate = 10</li>
    <li>Interest Rate = 1.4</li>
    <li>Years = 25</li>
</ul>
</div>

The id must be error-report. This div will be displayed if there is any error handling the form input or calculator. You can place your own content within the div.

The div should be display: none; initially.

You can place this div whereever you like on your page. You can style this div however you like.

2.c) Insert a containing div for the chart

Insert a containing div to your page or article where you would like the chart to appear.

You must use id compound-calculator-chart

<div id="compound-calculator-chart"></div>

The chart will be inserted at this location. You can place this div whereever you like on your page. You can alter the the colours and the currency and locale

2.d) Insert a containing table for the tablulated data

Insert a table for displaying the monthly data from the calculator. This should be a table with set structure, insert the following:

<table id="tabulated-data">
    <thead>
        <tr>
            <th><b>Date</b></th>
            <th><b>Savings</b></th>
            <th><b>Interest</b></th>
            <th><b>Total</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

This table must have id tabulated-data

You can place this div whereever you like on your page. You can style this table however you like.

3. Call mm.js to insert the calculator

You are now ready to add the calculator!

Insert a <script> ... </script> block to the bottom of your page.

Add the following script to your page or article.

The arguments you provide will change the behaviour of the chart.

<script>
moneymage.ready(() => {
    moneymage.displayCompoundCalculator();
});
</script>

API

moneymage.displayCompoundCalculator()

This configures the Money Mage Compound Interest Calculator.

Parameters

There are no parameters.

Query Parameters

The following query parameters are used on the page:

Parameter Type Description
N int The number of years to process
P float The starting balance of the savings or investments
m float Fixed monthly contributions to make (or withdraw, can be negative)
R float The interest rate, as a decimal between 0.0 .. 100.0 as a annual percentage.


Required HTML structure

The following HTML structure is required:

Styling

You can style any of the elements as you like. You can alter the the colours and the currency and locale

Example

moneymage.ready(() => {
    moneymage.displayCompoundCalculator();
});

Example Calculator

  1. Starting Lump Sum Saving: (£)

  2. Monthly Savings: (£/month)

  3. Interest Rate (%):

  4. Years:

Date Savings Interest Total


*
1. Starting Lump Sum Saving: (£) <input type="text" id="lump-sum" value="1000"/>

2. Monthly Savings: (£/month) <input type="text" id="monthly-saving" value="10"/>

3. Interest Rate (%): <input type="text" id="rate" value="1.4"/>

4. Years: <input type="text" id="years" value="25"/>

<input class="button" value="Recalculate" id="calculate" type="submit"/>

<div id="error-report" style="display: none;">
<p>There was an error with your input. Please try values like:</p>
<ul>
    <li>Lump Sum = 1000</li>
    <li>Monthy Savings Rate = 10</li>
    <li>Interest Rate = 1.4</li>
    <li>Years = 25</li>
</ul>
</div>

<div id="compound-calculator-chart"></div>

<table id="tabulated-data">
    <thead>
        <tr>
            <th><b>Date</b></th>
            <th><b>Savings</b></th>
            <th><b>Interest</b></th>
            <th><b>Total</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<input type="hidden" id="copy-value"/>
<input class="button" value="Copy Link" id="copy-link" type="submit"/>


<script>
moneymage.ready(() => {
    moneymage.displayCompoundCalculator();
});
</script>