{"id":89,"date":"2025-09-12T10:15:44","date_gmt":"2025-09-12T10:15:44","guid":{"rendered":"https:\/\/growfundz.360school.in\/?page_id=89"},"modified":"2025-09-15T09:05:45","modified_gmt":"2025-09-15T09:05:45","slug":"sip-calculator","status":"publish","type":"page","link":"https:\/\/grofundz.in\/index.php\/sip-calculator\/","title":{"rendered":"SIP Calculator"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Investment Calculator<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n body { font-family: Arial, sans-serif; display: flex; justify-content: center; background: #f4f4f4; }\n .calc-container { width: 50%; max-width: 500px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0px 4px 12px rgba(0,0,0,0.1); }\n .calc-box { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background: #f9f9f9; }\n input, select { width: 100%; padding: 8px; margin: 5px 0; border-radius: 6px; border: 1px solid #ccc; }\n button { background: #006400; color: white; border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; width: 100%; }\n button:hover { background: #228B22; }\n h2 { color: #006400; text-align: center; }\n canvas { margin-top: 20px; }\n p { font-weight: bold; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"calc-container\">\n\n <!-- Combined Calculator -->\n <div class=\"calc-box\">\n <h2>Investment Calculator<\/h2>\n <label>Choose Investment Type:<\/label>\n <select id=\"calcType\">\n <option value=\"sip\">SIP<\/option>\n <option value=\"lumpsum\">Lumpsum<\/option>\n <\/select>\n\n <div id=\"sipFields\">\n <label>SIP Amount (\u20b9):<\/label><input id=\"sipAmount\" type=\"number\">\n <\/div>\n\n <div id=\"lumpFields\" style=\"display:none;\">\n <label>Investment Amount (\u20b9):<\/label><input id=\"lumpAmount\" type=\"number\">\n <\/div>\n\n <label>Expected Return (% p.a.):<\/label><input id=\"rate\" type=\"number\" value=\"12\">\n <label>Time Period (Years):<\/label><input id=\"years\" type=\"number\">\n\n <button onclick=\"calculate()\">Calculate<\/button>\n <p id=\"result\"><\/p>\n <canvas id=\"investmentChart\" height=\"300\"><\/canvas>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ Currency formatter\n function formatINR(amount) {\n return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(amount);\n }\n\n let investmentChart;\n\n function createGradient(ctx, chartArea, color1, color2) {\n const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);\n gradient.addColorStop(0, color1);\n gradient.addColorStop(1, color2);\n return gradient;\n }\n\n \/\/ Show\/Hide fields based on type\n document.getElementById(\"calcType\").addEventListener(\"change\", function() {\n if (this.value === \"sip\") {\n document.getElementById(\"sipFields\").style.display = \"block\";\n document.getElementById(\"lumpFields\").style.display = \"none\";\n } else {\n document.getElementById(\"sipFields\").style.display = \"none\";\n document.getElementById(\"lumpFields\").style.display = \"block\";\n }\n });\n\n function calculate() {\n const type = document.getElementById(\"calcType\").value;\n const r = parseFloat(document.getElementById(\"rate\").value) \/ 100;\n const t = parseFloat(document.getElementById(\"years\").value);\n\n let P, FV;\n let years = [], invested = [], value = [];\n\n if (type === \"sip\") {\n P = parseFloat(document.getElementById(\"sipAmount\").value);\n if (!P || !r || !t) { alert(\"Please fill all fields\"); return; }\n\n let n = 12;\n FV = P * (((Math.pow(1 + r\/n, n*t) - 1) \/ (r\/n)) * (1 + r\/n));\n document.getElementById(\"result\").innerHTML = \"Future Value: \" + formatINR(FV);\n\n for (let i = 1; i <= t; i++) {\n let fvYear = P * (((Math.pow(1 + r\/n, n*i) - 1) \/ (r\/n)) * (1 + r\/n));\n years.push(\"Year \" + i);\n invested.push(P * 12 * i);\n value.push(fvYear);\n }\n\n } else { \/\/ Lumpsum\n P = parseFloat(document.getElementById(\"lumpAmount\").value);\n if (!P || !r || !t) { alert(\"Please fill all fields\"); return; }\n\n FV = P * Math.pow(1 + r, t);\n document.getElementById(\"result\").innerHTML = \"Future Value: \" + formatINR(FV);\n\n for (let i = 1; i <= t; i++) {\n let fvYear = P * Math.pow(1 + r, i);\n years.push(\"Year \" + i);\n invested.push(P);\n value.push(fvYear);\n }\n }\n\n \/\/ Create chart\n if (investmentChart) investmentChart.destroy();\n const ctx = document.getElementById(\"investmentChart\").getContext(\"2d\");\n const gradientInvested = createGradient(ctx, ctx.chartArea ?? {top:0,bottom:300}, \"rgba(255,69,0,0.2)\", \"rgba(255,69,0,0.6)\");\n const gradientValue = createGradient(ctx, ctx.chartArea ?? {top:0,bottom:300}, \"rgba(0,100,0,0.2)\", \"rgba(0,255,127,0.6)\");\n\n investmentChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: years,\n datasets: [\n {\n label: \"Invested Amount\",\n data: invested,\n borderColor: \"#FF4500\",\n backgroundColor: gradientInvested,\n fill: true,\n tension: 0.4\n },\n {\n label: \"Future Value\",\n data: value,\n borderColor: \"#00FF7F\",\n backgroundColor: gradientValue,\n fill: true,\n tension: 0.4\n }\n ]\n },\n options: {\n plugins: { legend: { position: \"top\" } },\n responsive: true,\n scales: {\n y: { ticks: { callback: val => formatINR(val) } }\n }\n }\n });\n }\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Investment Calculator Investment Calculator Choose Investment Type: SIPLumpsum SIP Amount (\u20b9): Investment Amount (\u20b9): Expected Return (% p.a.): Time Period (Years): Calculate<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":7,"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":210,"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions\/210"}],"wp:attachment":[{"href":"https:\/\/grofundz.in\/index.php\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}