Javascript Chart

A demo chart using math to calculate a simple chart.

by Anders Kitson

HTML

<table>
        <tr>
            <th>Enter Load Data:</th>
            <td></td>
            <th>Loan Balance, Cumulative Equity, and interest Payments</th>
        </tr>
        <tr><td>Amount of the loan ($):</td>
            <td><input id ="amount" onchange="calculate();"></td>
            <td rowspan=8>
                <canvas id ="graph" width="400" height="250"></canvas>
            </td>
        </tr>
        <tr><td>Annual interest(%):</td>
            <td><input id="apr" onchange="caluclate();"></td>
        </tr>
        <tr><td>Repayment period (years):</td>
            <td><input id="years" onchange="calulate();"></td>
        </tr>
        <tr><td>Zipcode (to find letters):</td>
            <td><input id="zipcode" onchange="calculate"();"></td>
        </tr>
        <tr><th>Approximate Payments:</th>
            <td><button onclick="caluclate();">Calculate</button><td>
        </tr>
        <tr><td>Monthly Payment:</td>
            <td>$<span class="output" id="payment"></span></td>
        </tr>   
        <tr><td>Total payment:</td>
            <td>$<span class="output" id="total"></span></td>
        </tr> 
        <tr><td>Total Interest:</td>
            <td>$<span class="output" id="totalinterrest"></span></td>
        </tr>
        <tr><th>Sponsors:</th><td colspan=2>
            Apply for your loans with fine lenders:
            <div id="lenders"></div></td></tr>
      </table>

CSS

.output{
    font-wight:bold;
}
#payment{
    text-decoartion:underline;
}
#graph {
    border: solid black 1px;
}

JavaScript

function calculate(){
    // Look up the input and output elements in the document
    var amount = document.getElementById("amount");
    var apr = document.getElementById("apr");
    var years = document.getElementById("years");
    var zipcode = document.getElementById("zipcode");
    var payment = document.getElementById("payment");
    var total = document.getElementById("total");
    var totalinterest = document.getElementById("totalinterest");
    
    //Assume entries are valid
    //Get principal value
    var principal = parseFloat(amount.value);
    //Get interest value convert from a percentage to a decimal
    var interest = parseFloat(apr.value) / 100 / 12;
    //Get payments value and convert payment period  into years
    var payments = parseFloat(years.value) * 12;
    
    //complete the monthly payment figure
    var x = Math.pow(1 + interest, payments); // Math.pow() computes powers
    var monthly = (principal*x*interest)/(x-1);
    
    
    //If the result is a finite number, the user's input was good and we hav meaningful results to display.
    if (isFinite(monthly)){
        // Fill in the output fields, rounding to 2 decimal places
        payment.innert.HTML = monthly.toFixed(2);
        total.innerHTML = (monthly * payments).toFixed(2);
        totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
         
        // Save the user's input so we can restore it the next time they visit
        save(amount.value, apr.value, years.value, zipcode.value);
        
        // Advertise: find and display local lenders but ingore network errors
        try{ //catch any errors that occur within these curly braces
            getLenders(amount.value, apr.value, years.value, zipcode.value);
        }
        
        catch(e) { /* and ignore these errors */ } 
        
        // Finally, chart loan balance, and interest and equity payments
        chart(principal, interest, monthly, payments);
        
    }else{
        //Result...