-
Notifications
You must be signed in to change notification settings - Fork 0
/
roi.html
166 lines (159 loc) · 5.92 KB
/
roi.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include bootstrap stylesheets -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<title>Rate of Interest</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.load('visualization', '1.0', {'packages':['corechart']});
var calc_rate_per_year = function(rm) {
var ry = (Math.pow((1.0 + rm/100.0), 12.0) - 1.0) * 100.0;
return ry;
}
var calc_rate_per_month = function(ry) {
var rm = (Math.pow((1.0 + ry/100.0), 1.0/12.0) - 1.0) * 100.0;
return rm;
}
var calc_months_to_double = function(rm) {
var dm = Math.log(2.0)/Math.log(1.0 + rm/100.0);
return dm;
}
var calc_rm_from_dm = function(dm) {
var rm = (Math.pow(2.0, 1.0/dm) - 1.0) * 100.0;
return rm;
}
var amt_calculator_for_rate = function(rate) {
var calculate_amt = function(time) {
var amt = Math.pow((1.0 + rate/100.0), time);
return amt;
}
return calculate_amt;
}
var process_input = function() {
var input_unit = document.getElementById("input_unit").value;
var input_rate = document.getElementById("input_rate").value;
if(!input_rate) return;
var rm = 0;
var ry = 0;
var dm = 0;
var dy = 0;
if(input_unit == "rate_pm") {
rm = input_rate;
ry = calc_rate_per_year(rm);
dm = calc_months_to_double(rm);
dy = dm/12.0;
} else if(input_unit == "rate_py") {
ry = input_rate;
rm = calc_rate_per_month(ry);
dm = calc_months_to_double(rm);
dy = dm/12.0;
} else if(input_unit == "months_to_double") {
dm = input_rate;
dy = dm/12.0;
rm = calc_rm_from_dm(dm);
ry = calc_rate_per_year(rm);
} else if(input_unit == "years_to_double") {
dy = input_rate;
dm = dy * 12.0;
rm = calc_rm_from_dm(dm);
ry = calc_rate_per_year(rm);
}
setTimeout(
function() {
set_results(
Math.round(rm * 100.0) / 100.0,
Math.round(ry * 100.0) / 100.0,
Math.ceil(dm),
Math.round(dy * 100.0) / 100.0
);
},
0
);
setTimeout(
function() {
draw_chart(Math.round(ry * 100.0) / 100.0, 20);
},
0
);
}
var set_results = function(rm, ry, dm, dy) {
document.getElementById("result_rm").innerHTML = rm;
document.getElementById("result_ry").innerHTML = ry;
document.getElementById("result_dm").innerHTML = dm;
document.getElementById("result_dy").innerHTML = dy;
}
var draw_chart = function(rate, time) {
var final_month_number = Math.ceil(time);
var amt_calculator = amt_calculator_for_rate(rate);
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Time');
data.addColumn('number', 'Amount');
for(index = 0; index <= final_month_number; index++) {
data.addRows([
[index, amt_calculator(index)]
]);
}
// Set chart options
var options = {'title':'Returns for rate of interest '+rate+' %',
vAxis:{title:'Amount'},
hAxis:{title:'Time'},};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('result_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="container">
<h1>Interest Rate Convertor</h1>
<h2>Input</h2>
<form action="#" onsubmit="process_input(); return false;" role="form">
<div class="form-group">
<label for="input_unit">Input type</label>
<select name="input_unit" id="input_unit" class="form-control">
<option value="rate_pm">Rate % per month</option>
<option value="rate_py">Rate % per year</option>
<option value="months_to_double">Months to double your investment</option>
<option value="years_to_double">Years to double your investment</option>
</select>
</div>
<div class="form-group">
<label for="input_rate">Input value</label>
<input type=text id="input_rate" name=input_rate class="form-control" />
</div>
<div class="form-group">
<input type=submit value="Convert & Show chart" class="form-control" />
</div>
</form>
<h2>Results</h2>
<div id="results">
<div class='table-responsive'>
<table class='table table-striped table-bordered'>
<tr><td>Rate % per month</td><td><div id="result_rm"></div></td></tr>
<tr><td>Rate % per year</td><td><div id="result_ry"></div></td></tr>
<tr><td>Months to double</td><td><div id="result_dm"></div></td></tr>
<tr><td>Years to double</td><td><div id="result_dy"></div></td></tr>
</table>
</div>
</div>
<div id="result_chart" style="width:100%; height:600px">
</div>
</div>
<!-- JavaScript placed at the end of the document so the pages load faster -->
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).resize(function(){
process_input();
});
});
</script>
</body>
</html>