COP4813 JTP Assignment 6

JavaScript calculator with plotting

by Jason Pandelos

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="content">
<div class="assignmentTitle" style="height: 40px"><strong>COP4813 - Web Systems I - Assignment 6<br>JavaScript Calculator and Plotting</strong></div>

<div id="inputdiv">
<p></p>
<div id="inputdivtitle" style="text-align: center;">Compound Interest Calculator <br/><br></div>
The following calculator is meant to demostrate the power of compound interest. It will display the effects on a loan  of your specifications over time if  no payments were made.<br/><br>

A = P (1 + r / n)<sup>nt</sup><br/><br/>

Input Principal (P) <input type="text" id="p" size="5" value="100000"/><br/>
Input Annual Percentage Rate (r) <input type="text" id="r" size="5" value="0.06"/><br/>
Input Compundings per Year (n) <input type="text" id="n" size="5" value="12"/><br/>
Input Starting Year (tmin) <input type="text" id="tmin" value="0" size="5"/><br/>
Input Ending Year (tmax) <input type="text" id="tmax" value="30" size="5"/><br/>
<br/><br/>
			
<input type="button" value="Calculate" id="calculate" />
<input type="button" value="Plot" id="plot" />

<br/><br/>
<p id="output"> </p>  
</div>

<div id="outputdiv" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div> <!-- End content div -->

JavaScript

// Global variables
var p = 0;            // principle
var r = 6.0;          // APR
var t = new Array();  // range of years
var n = 12;           // number of times compounded per years
var A = new Array();  // amount at specific  points in time

var plot_points = new Array();  // plot points

var num_years_calc = 0;

function calculateA(p, r, n, t) 
{
  //alert("Got here too P = " + p + " r = " + r + " n = " + n + " t = " + t);     
  return p * Math.pow( 1 + ( r / n ), (n * t) );
}


function calculate() 
{
  p = Number($('#p').val());
  r = Number($('#r').val());
  n = Number($('#n').val());
  var tmin = Number($('#tmin').val());
  var tmax = Number($('#tmax').val());
  var current_year = 0;
 
  var array_index = 0;
  for (current_year = tmin; current_year <= tmax; current_year++) 
  {
    //alert("P = " + p + " r = " + r + " n = " + n + " tmin = " + tmin + " tmax = " + tmax + "current_year = " + current_year + " array_index = " + array_index);     

    t[array_index]           = current_year;
    A[array_index]           = calculateA(p, r, n, current_year);
    plot_points[array_index] = [t[array_index],A[array_index]];
    array_index++;
  }

  num_years_calc = array_index - 1;
}


function displayValues()
{
  var s = "";
    
  s = "Amount = $"+ p + " (1 + " + r + " / " + n + ")<sup>("+ n + " * t)</sup><br/><br/>";
    
  for (var i = 0; i <= num_years_calc; i++)
  {
    s += " Amount = $" + A[i].toFixed(2) + "&nbsp&nbsp&nbsp&nbsp&nbsp" + " year = " + t[i] + "<br/>";       
  }
    
  output.innerHTML = s;
}


function plotValues()
{
  calculate();
  chart = new Highcharts.Chart({
            chart: {
                renderTo: 'outputdiv',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Compound Interest Equation',
                x: -20 //center
            },
            xAxis: {
                title: {
                    text: 'Years'
          ...