harunpehlivan
3/6/2018 - 3:49 PM
EMI Calculator
EMI Calculator
<link href="http://it.xpsusa.com/tconn/preso/admin/assets/global/css/simple-slider.css" rel="stylesheet" />
<link href="http://it.xpsusa.com/tconn/preso/admin/assets/global/css/style.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet" />
<script src="http://it.xpsusa.com/tconn/preso/admin/assets/global/js/adminLTE.js"></script>
<script src="http://it.xpsusa.com/tconn/preso/admin/assets/global/js/bootstrap.min.js"></script>
<script src="http://it.xpsusa.com/tconn/preso/admin/assets/global/js/simple-slider.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$(document).ready(function(){
$("#la").bind(
"slider:changed", function (event, data) {
$("#la_value").html(data.value.toFixed(0));
calculateEMI();
}
);
$("#nm").bind(
"slider:changed", function (event, data) {
$("#nm_value").html(data.value.toFixed(0));
calculateEMI();
}
);
$("#roi").bind(
"slider:changed", function (event, data) {
$("#roi_value").html(data.value.toFixed(2));
calculateEMI();
}
);
function calculateEMI(){
var loanAmount = $("#la_value").html();
var numberOfMonths = $("#nm_value").html();
var rateOfInterest = $("#roi_value").html();
var monthlyInterestRatio = (rateOfInterest/100)/12;
var top = Math.pow((1+monthlyInterestRatio),numberOfMonths);
var bottom = top -1;
var sp = top / bottom;
var emi = ((loanAmount * monthlyInterestRatio) * sp);
var full = numberOfMonths * emi;
var interest = full - loanAmount;
var int_pge = (interest / full) * 100;
$("#tbl_int_pge").html(int_pge.toFixed(2)+" %");
//$("#tbl_loan_pge").html((100-int_pge.toFixed(2))+" %");
var emi_str = emi.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var loanAmount_str = loanAmount.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var full_str = full.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var int_str = interest.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$("#emi").html(emi_str);
$("#tbl_emi").html(emi_str);
$("#tbl_la").html(loanAmount_str);
$("#tbl_nm").html(numberOfMonths);
$("#tbl_roi").html(rateOfInterest);
$("#tbl_full").html(full_str);
$("#tbl_int").html(int_str);
var detailDesc = "<thead><tr class='success'><th>Payment No.</th><th>Begining Balance</th><th>EMI</th><th>Principal</th><th>Interest</th><th>Ending Balance</th></thead><tbody>";
var bb=parseInt(loanAmount);
var int_dd =0;var pre_dd=0;var end_dd=0;
for (var j=1;j<=numberOfMonths;j++){
int_dd = bb * ((rateOfInterest/100)/12);
pre_dd = emi.toFixed(2) - int_dd.toFixed(2);
end_dd = bb - pre_dd.toFixed(2);
detailDesc += "<tr><td>"+j+"</td><td>"+bb.toFixed(2)+"</td><td>"+emi.toFixed(2)+"</td><td>"+pre_dd.toFixed(2)+"</td><td>"+int_dd.toFixed(2)+"</td><td>"+end_dd.toFixed(2)+"</td></tr>";
bb = bb - pre_dd.toFixed(2);
}
detailDesc += "</tbody>";
$("#illustrate").html(detailDesc);
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'EMI Calculator'
},
tooltip: {
//pointFormat: '{series.name}: <b>{point.value}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
// enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Amount',
data: [
['Loan', eval(loanAmount)],
['Interest', eval(interest.toFixed(2))]
]
}]
});
}
calculateEMI();
});<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<div class="col-md-7">
<h4><span class="label label-primary">Loan Amount is <strong><span class='' id="la_value">260000</span></strong></span></h4><input data-slider="true" data-slider-range="100000,5000000" data-slider-snap="true" data-slider-step="10000" id="la" type="text" value="260000">
<h4><span class="label label-danger">No. of Month is <strong><span class='' id="nm_value">36</span></strong></span></h4><input data-slider="true" data-slider-range="120,360" data-slider-snap="true" data-slider-step="1" id="nm" type="text" value="36">
<h4><span class="label label-warning">Rate of Interest [ROI] is <strong><span class='' id="roi_value">10.2</span></strong></span></h4><input data-slider="true" data-slider-range="8,16" data-slider-snap="true" data-slider-step=".05" id="roi" type="text" value="10.2"><br>
<div class="alert alert-info col-md-5">
<strong>Monthly EMI</strong><br>
<button class="btn btn-success btn-lg" id='emi' type="button"></button><br>
</div>
<div class="alert alert-info col-md-5">
<strong>Total Interest</strong><br>
<button class="btn btn-warning btn-lg" id='tbl_int' type="button"></button><br>
</div>
<div class="alert alert-info col-md-5">
<strong>Payable Amount</strong><br>
<button class="btn btn-info btn-lg" id='tbl_full' type="button"></button><br>
</div>
<div class="alert alert-info col-md-5">
<strong>Interest Percentage</strong><br>
<button class="btn btn-info btn-lg" id='tbl_int_pge' type="button"></button><br>
</div>
</div>
<div id="container" class="col-md-5" data-highcharts-chart="0"><div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 644px; height: 400px; text-align: left; line-height: normal; z-index: 0; left: 0.166626px; top: 0.300049px;"><svg version="1.1" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="644" height="400"><desc>Created with Highcharts 4.1.5</desc><defs><clipPath id="highcharts-1"><rect x="0" y="0" width="624" height="338"/></clipPath></defs><rect x="0" y="0" width="644" height="400" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"/><g class="highcharts-button" style="cursor:default;" stroke-linecap="round" transform="translate(610,10)"><title>Chart context menu</title><rect x="0.5" y="0.5" width="24" height="22" strokeWidth="1" fill="white" stroke="none" stroke-width="1" rx="2" ry="2"/><path fill="#E0E0E0" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" stroke="#666" stroke-width="3" zIndex="1"/><text x="0" zIndex="1" style="color:black;fill:black;" transform="translate(0,12)"></text></g><g class="highcharts-series-group" zIndex="3"><path fill="rgba(124,181,236,0.25)" d="M 0 0"/><g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(10,47) scale(1 1)" style="cursor:pointer;"><path fill="#7cb5ec" d="M 311.9706710586679 25.00000298675974 A 144 144 0 1 1 199.97588563938427 78.52018014098562 L 312 169 A 0 0 0 1 0 312 169 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"/><path fill="#434348" d="M 200.06642145621583 78.40820128520187 A 144 144 0 0 1 311.7999868889177 25.000138907166303 L 312 169 A 0 0 0 0 0 312 169 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"/></g><g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(10,47) scale(1 1)"/></g><text x="322" text-anchor="middle" class="highcharts-title" zIndex="4" style="color:#333333;font-size:18px;fill:#333333;width:580px;" y="24"><tspan>EMI Calculator</tspan></text><g class="highcharts-data-labels highcharts-tracker" visibility="visible" zIndex="6" transform="translate(10,47) scale(1 1)" opacity="1" style="cursor:pointer;"><path fill="none" d="M 391.89202528365956 326.0579018989866 C 386.89202528365956 326.0579018989866 383.44871377636485 318.8368489381137 378.71416045383467 308.90790111691337 L 373.9796071313045 298.97895329571304" stroke="#000000" stroke-width="1" visibility="inherit"/><path fill="none" d="M 232.10797471634044 11.942098101013414 C 237.10797471634044 11.942098101013414 240.55128622363506 19.16315106188636 245.28583954616528 29.09209888308666 L 250.0203928686955 39.02104670428696" stroke="#000000" stroke-width="1" visibility="inherit"/><g zIndex="1" style="cursor:pointer;" transform="translate(397,316)" visibility="inherit"><text x="5" zIndex="1" style="font-size: 11px; font-weight: bold; color: rgb(0, 0, 0); fill: rgb(0, 0, 0); text-shadow: 0px 0px 6px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);" transform="translate(0,16)"><tspan style="font-weight:bold">Loan</tspan><tspan dx="0">: 85.8 %</tspan></text></g><g zIndex="1" style="cursor:pointer;" transform="translate(133,2)" visibility="inherit"><text x="0" zIndex="1" style="font-size: 11px; font-weight: bold; color: rgb(0, 0, 0); fill: rgb(0, 0, 0); text-shadow: 0px 0px 6px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);" transform="translate(0,16)"><tspan style="font-weight:bold">Interest</tspan><tspan dx="0">: 14.2 %</tspan></text></g></g><g class="highcharts-legend" zIndex="7"><g zIndex="1"><g/></g></g><g class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(389,-9999)" opacity="0" visibility="visible"><path fill="none" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)" width="134" height="44"/><path fill="none" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)" width="134" height="44"/><path fill="none" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)" width="134" height="44"/><path fill="rgba(249, 249, 249, .85)" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#7cb5ec" stroke-width="1"/><text x="8" zIndex="1" style="font-size:12px;color:#333333;fill:#333333;" transform="translate(0,20)"><tspan style="font-size: 10px">Loan</tspan><tspan style="fill:#7cb5ec" x="8" dy="15">●</tspan><tspan dx="0"> Amount: </tspan><tspan style="font-weight:bold" dx="0">260 000</tspan></text></g><text x="634" text-anchor="end" zIndex="8" style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg></div></div>
<div class="box-body table-responsive" id='datatable'>
<table width="100%" class="table table-striped table-bordered" id="illustrate"><thead><tr class="success"><th>Payment No.</th><th>Begining Balance</th><th>EMI</th><th>Principal</th><th>Interest</th><th>Ending Balance</th></tr></thead><tbody><tr><td>1</td><td>260000.00</td><td>8413.90</td><td>6203.90</td><td>2210.00</td><td>253796.10</td></tr><tr><td>2</td><td>253796.10</td><td>8413.90</td><td>6256.63</td><td>2157.27</td><td>247539.47</td></tr><tr><td>3</td><td>247539.47</td><td>8413.90</td><td>6309.81</td><td>2104.09</td><td>241229.66</td></tr><tr><td>4</td><td>241229.66</td><td>8413.90</td><td>6363.45</td><td>2050.45</td><td>234866.21</td></tr><tr><td>5</td><td>234866.21</td><td>8413.90</td><td>6417.54</td><td>1996.36</td><td>228448.67</td></tr><tr><td>6</td><td>228448.67</td><td>8413.90</td><td>6472.09</td><td>1941.81</td><td>221976.58</td></tr><tr><td>7</td><td>221976.58</td><td>8413.90</td><td>6527.10</td><td>1886.80</td><td>215449.48</td></tr><tr><td>8</td><td>215449.48</td><td>8413.90</td><td>6582.58</td><td>1831.32</td><td>208866.90</td></tr><tr><td>9</td><td>208866.90</td><td>8413.90</td><td>6638.53</td><td>1775.37</td><td>202228.37</td></tr><tr><td>10</td><td>202228.37</td><td>8413.90</td><td>6694.96</td><td>1718.94</td><td>195533.41</td></tr><tr><td>11</td><td>195533.41</td><td>8413.90</td><td>6751.87</td><td>1662.03</td><td>188781.54</td></tr><tr><td>12</td><td>188781.54</td><td>8413.90</td><td>6809.26</td><td>1604.64</td><td>181972.28</td></tr><tr><td>13</td><td>181972.28</td><td>8413.90</td><td>6867.14</td><td>1546.76</td><td>175105.14</td></tr><tr><td>14</td><td>175105.14</td><td>8413.90</td><td>6925.51</td><td>1488.39</td><td>168179.63</td></tr><tr><td>15</td><td>168179.63</td><td>8413.90</td><td>6984.37</td><td>1429.53</td><td>161195.26</td></tr><tr><td>16</td><td>161195.26</td><td>8413.90</td><td>7043.74</td><td>1370.16</td><td>154151.52</td></tr><tr><td>17</td><td>154151.52</td><td>8413.90</td><td>7103.61</td><td>1310.29</td><td>147047.91</td></tr><tr><td>18</td><td>147047.91</td><td>8413.90</td><td>7163.99</td><td>1249.91</td><td>139883.92</td></tr><tr><td>19</td><td>139883.92</td><td>8413.90</td><td>7224.89</td><td>1189.01</td><td>132659.03</td></tr><tr><td>20</td><td>132659.03</td><td>8413.90</td><td>7286.30</td><td>1127.60</td><td>125372.73</td></tr><tr><td>21</td><td>125372.73</td><td>8413.90</td><td>7348.23</td><td>1065.67</td><td>118024.50</td></tr><tr><td>22</td><td>118024.50</td><td>8413.90</td><td>7410.69</td><td>1003.21</td><td>110613.81</td></tr><tr><td>23</td><td>110613.81</td><td>8413.90</td><td>7473.68</td><td>940.22</td><td>103140.13</td></tr><tr><td>24</td><td>103140.13</td><td>8413.90</td><td>7537.21</td><td>876.69</td><td>95602.92</td></tr><tr><td>25</td><td>95602.92</td><td>8413.90</td><td>7601.28</td><td>812.62</td><td>88001.64</td></tr><tr><td>26</td><td>88001.64</td><td>8413.90</td><td>7665.89</td><td>748.01</td><td>80335.75</td></tr><tr><td>27</td><td>80335.75</td><td>8413.90</td><td>7731.05</td><td>682.85</td><td>72604.70</td></tr><tr><td>28</td><td>72604.70</td><td>8413.90</td><td>7796.76</td><td>617.14</td><td>64807.94</td></tr><tr><td>29</td><td>64807.94</td><td>8413.90</td><td>7863.03</td><td>550.87</td><td>56944.91</td></tr><tr><td>30</td><td>56944.91</td><td>8413.90</td><td>7929.87</td><td>484.03</td><td>49015.04</td></tr><tr><td>31</td><td>49015.04</td><td>8413.90</td><td>7997.27</td><td>416.63</td><td>41017.77</td></tr><tr><td>32</td><td>41017.77</td><td>8413.90</td><td>8065.25</td><td>348.65</td><td>32952.52</td></tr><tr><td>33</td><td>32952.52</td><td>8413.90</td><td>8133.80</td><td>280.10</td><td>24818.72</td></tr><tr><td>34</td><td>24818.72</td><td>8413.90</td><td>8202.94</td><td>210.96</td><td>16615.78</td></tr><tr><td>35</td><td>16615.78</td><td>8413.90</td><td>8272.67</td><td>141.23</td><td>8343.11</td></tr><tr><td>36</td><td>8343.11</td><td>8413.90</td><td>8342.98</td><td>70.92</td><td>0.13</td></tr></tbody></table>
</div>
</div>
</body>
</html>