Plot Formula Web Page

Test bed for web page A4

by scotp71

HTML

<script src="https://www.highcharts.com/demo/line-basic"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Mortgage Payoff<br/><br/>


Input L for the amount of the loan <input type="text" id="L" size="5" /><br/><br/>
Input T for the number of years of the loan <input type="text" id="T" size="5" /><br/><br/>
Input I for the interest rate percentage <input type="text" id="I" size="5" % /><br/><br/>
How much extra would you like to pay towards the principle <input type="text" id="x" size="5" /><br/><br/>


<input type="button" value="Calculate" id="calculate" />
<br/><br/>
<p id="output"> </p> 
<br/><br/>
<div id="container" style="min-width: 400px; height=400px; margin: 0 auto"></div>

JavaScript

function calculateNumPay(t) {
	var n = t*12;
  return n;
}

function calculateMonthlyInt(rate) {
	var int = ((rate/100)/12);
  return int;
}

var l = 0;
var t = 0;
var rate = 0;
var n = 0;
var int = 0;
var negN = 0;
var payM = 0;
var intPay = 0;
var princPay = 0;
var endBal = 0;
var extraPay = 0;
var a = new Array();
var b = new Array();
var v = new Array();
var j = new Array();
var k = new Array();
var z = new Array();

//Calculate the amount of the payment
function calculatePayment() {
	l = Number($('#L').val());
  t = Number($('#T').val());
  rate = Number($('#I').val());
  n = calculateNumPay(t);
  int = calculateMonthlyInt(rate);
	negN = (n * -1);
  var intPlus = (int + 1);
  var firstExp = (Math.pow(intPlus, negN));
	var d = ((int/(1 - firstExp))*l)
  var payM2 = d.toFixed(2);
  payM = payM2;
  var s = "";
  s = "Your payment is $" + payM
	output.innerHTML = s;
  calculateAmort(payM);
  calculateExtra(payM);
}
//calculate the amortization chart
function calculateAmort(payM) {
	for(f=0; f<n; f++){
		intPay = (l*int).toFixed(2);
  	princPay = (payM - intPay).toFixed(2);
  	endBal = (l.toFixed(2)) - princPay;
    a[f] = f;
    b[f] = l;
    v[f] = [a[f], b[f]];
    l = endBal;
    }
}
//calculate the updated amortization chart based on the extra principle payment
function calculateExtra(payM) {
	extraPay = Number($('#x').val());
  l = Number($('#L').val());
  t = Number($('#T').val());
  rate = Number($('#I').val());
  for(f=0; f<n; f++){
      intPay = (l*int).toFixed(2);
      princPay = ((payM - intPay) + extraPay).toFixed(2);
      var endBal = (l.toFixed(2)) - princPay;
      if(endBal>=0){
      	j[f] = f;
      	k[f] = l;
      	z[f] = [j[f], k[f]];
     	}
      l = endBal;
    }
}

function plotValues(){
	calculatePayment();
  chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container',
          type: 'area',
          marginRight: 130,
          marginBottom: 25,
          backgroundColor: {
          	linearGradient: [0, 0, 500,...