Amortization calculator

The amortization calculator estimates how much money will be paid over the life of the loan for principal and interest.

by meetravi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://www.networkcapital.net/landingpages/scripts/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="mortCalcApp">
        <div ng-controller="LineCtrl">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h1>
                            {{title}}
                        </h1>
                        <!--<pre>{{user | json}}</pre>-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <p>
                        The amortization calculator estimates how much money will be paid over the life of the loan for principal and interest. The calculator breaks down payments into interest and principal.</p> 
                    </div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                     <div>
                        Over {{user.details.loanTerm == "15"? "15":"30"}} years you'll pay: <span ng-bind="amortValues.totalPayment | currency:undefined:0"></span>
                      </div>
                      <div>
                        Based on an estimated monthly payment of <span ng-bind="amortValues.monthlyPayment | currency:undefined:0"></span>
                     </div>
                  </div>
               </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="loanAmount">Loan amount</label>
                                <div class="input-group">

                                    <span class="input-group-addon">
                                        $
                                   ...

CSS

body {
  "Open Sans",
  open-sans,
  Arial,
  "Helvetica Neue",
  sans-serif;
}
.form-group{
  margin-top:10px;
}
.input-group-addon{
  background-color:transparent;
  border:none;
  border-bottom:1px solid #ccc;
  color:#aaa;
}
input[type=checkbox].checkbox {
  width:20px;
  margin-right:5px;
  }
.form-control{
  border:none;
  border-bottom:1px solid #ccc;
  box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0px 0px inset;
  font-size: 16px;
    font-weight: 100;
    color: #222;
}

JavaScript

angular.module('mortCalcApp', ['chart.js']).config(function(ChartJsProvider) {
   //Chart.defaults.global.hover.mode = 'single';
    ChartJsProvider.setOptions({
     // chartColors: ['#0066ff', '#339933','#ff6600'],
     // responsive: false
    });
    
   })
   .controller('LineCtrl', function($scope, $http, $filter, $attrs, $timeout) {
     $scope.title = "Amortization calculator";
     $scope.simple = true;
     //console.log($scope);
     $scope.user = {
       details: {}
     };
     $scope.user.details.loanAmount = "200000";
     $scope.user.details.interestRate = 3.246;
     // $scope.user.details.interestRate = $filter('number')($scope.user.details.interestRate, 3);
     $scope.user.details.loanTerm = "30";
     //$scope.startYears = 30;
  $scope.colors =  ['#0066ff', '#339933','#ff6600'];
  $scope.labels = ["1 month", "50 months","100 months","150 months", "200 months","250 months","300 months", "360 months"];
  $scope.series = [ 'Interest','Principal','Remaining'];
  $scope.data = [
    [0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0]
  ];
 
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
 $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' },{ yAxisID: 'y-axis-3' }];
  
  $scope.options = {
    
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        },
        {
          id: 'y-axis-3',
          type: 'linear',
          display: true,
          position: 'left'
        }
      ]
    },
     hover: {
            // Overrides the global setting
            mode: 'label',
            onHover: function(points){
            //console.log(points);
            }
            
    },
    legend: {display:true},
    title:{display:false,text:'Hello'},
    elements:{
    		
   ...