Cant get it to show any graph
<div class="calc"> <div class="calc-options" js-data-hide-decimals=""> <div class="calc-options__item calc-options__item--saving-period"> <label for="savingPeriodLabel" class="calc-options__label">Opsparingsperiode </label> <div class="calc-options__field"> <input id="savingPeriodLabel" class="calc-options__input" type="number" name="input" min="0" max="99" value="10" js-period-value=""> <select class="calc-options__select" js-period-token="" aria-labelledby="savingPeriodLabel"> <option value="year">år</option> <option value="month">Måneder</option><option value="days">dage</option> </select> </div> </div> <div class="calc-options__item calc-options__item--saving-initial-balance"> <label for="initialBalanceLabel" class="calc-options__label">Startbeløb</label> <div class="calc-options__field calc-options__field--label-right" data-label=" kr."> <input id="initialBalanceLabel" class="calc-options__input" type="number" name="input" min="0" max="10000000" value="1000" js-initial-balance=""> </div> </div> <div class="calc-options__item calc-options__item--saving-percent-yield"> <label for="percentYieldLabel" class="calc-options__label">Opsparingsrente</label> <div class="calc-options__field calc-options__field--label-right" data-label="%"> <input id="percentYieldLabel" class="calc-options__input" type="number" name="input" min="0" max="100" step="0.01" use-decimals="" value="4" js-percent-yield=""> </div> </div> <div class="calc-options__item calc-options__item--saving-monthly-contribution"> <label for="monthlyContributionLabel" class="calc-options__label">Opsparet beløb per måned</label> <div class="calc-options__field calc-options__field--label-right" data-label=" kr."> <input id="monthlyContributionLabel" class="calc-options__input" type="number" name="input" min="0" max="9999999" value="100" js-contribution=""> </div> </div> <div class="calc-options__item calc-options__item--saving-tax-rate"> <label for="taxRateLabel" class="calc-options__label">Skatteprocent</label> <div class="calc-options__field calc-options__field--label-right" data-label="%"> <input id="taxRateLabel" class="calc-options__input" type="number" name="input" min="0" max="100" step="0.01" use-decimals="" value="0" js-tax-rate=""> </div> </div> <div class="calc-options__item calc-options__item--saving-calculate-tax"> <label class="calc-options__label">Medregn skat?</label> <div class="calc-options__field"> <label class="calc-options__radio-label calc-options__radio-label--circle calc-options__radio-label--active" js-is-calculate-tax-elem="" for="calculate-tax-on"> Ja <input type="radio" name="calculate-tax-on" value="1" js-is-calculate-tax=""> </label> <label class="calc-options__radio-label calc-options__radio-label--circle" js-is-calculate-tax-elem="" for="calculate-tax-off"> Nej <input type="radio" name="calculate-tax-off" value="0" js-is-calculate-tax=""> </label> </div> </div> <div class="calc-options__item calc-options__item--payment-frequency"> <label class="calc-options__label">Rentetilskrivning</label> <div class="calc-options__field"> <label class="calc-options__radio-label" js-compound-interval-elem=""> Årlig <input type="radio" value="1" js-compound-interval=""> </label> <label class="calc-options__radio-label" js-compound-interval-elem=""> Kvartilvis <input type="radio" value="3" js-compound-interval=""> </label> <label class="calc-options__radio-label" js-compound-interval-elem=""> Månedlig <input type="radio" value="12" js-compound-interval=""> </label> <label class="calc-options__radio-label calc-options__radio-label--active" js-compound-interval-elem=""> Daglig <input type="radio" value="360" js-compound-interval=""> </label> </div> </div> </div> <div class="calc-tabs"> <div class="calc-tabs__menu"> <span class="calc-tabs__menu-item calc-tabs__menu-item--active" js-menu="bars">Bars</span> <span class="calc-tabs__menu-item" js-menu="line">Linje</span> <span class="calc-tabs__menu-item" js-menu="breakdown">Tabel</span> </div> <div class="calc-tabs__content" js-menu-item="bars"> <div id="compoundBarsChart" style="max-width: 730px; width: 100%; height: 350px; margin: auto; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1676965596482"><div style="position: relative; width: 730px; height: 350px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;"><canvas data-zr-dom-id="zr_0" width="730" height="350" style="position: absolute; left: 0px; top: 0px; width: 730px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class="" style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); font: 14px / 21px "Microsoft YaHei"; padding: 10px; top: 0px; left: 0px; transform: translate3d(372px, 166px, 0px); border-color: rgb(96, 211, 148); pointer-events: none; visibility: hidden; opacity: 0;">År 5: 9.229,89kr.</div></div> <div class="calc-chart__footer"> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Investering</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-investment-format="">11.000,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Samlet skat</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-total-tax="">0,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Indtjent beløb</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-final-balance="">14.268,70</span> kr.</strong> </span> </span> </div> </div> </div> <div class="calc-tabs__content is-hidden" js-menu-item="line"> <div id="compoundLineChart" style="max-width: 730px; width: 100%; height: 350px; margin: auto; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1676965596483"><div style="position: relative; width: 481px; height: 350px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="481" height="350" style="position: absolute; left: 0px; top: 0px; width: 481px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div> <div class="calc-chart__footer"> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Investering</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-investment-format="">11.000,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Samlet skat</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-total-tax="">0,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Indtjent beløb</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-final-balance="">14.268,70</span> kr.</strong> </span> </span> </div> </div> </div> <div class="calc-tabs__content is-hidden" js-menu-item="breakdown"> <div class="calc-breakdown calc-breakdown--interest-calculator"> <div class="calc-breakdown__row calc-breakdown__row--header"> <div class="calc-breakdown__column">År</div> <div class="calc-breakdown__column">Balance</div> </div> <div js-breakdown=""><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 1</div><div class="calc-breakdown__column">5.787,82kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 2</div><div class="calc-breakdown__column">6.603,71kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 3</div><div class="calc-breakdown__column">7.448,65kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 4</div><div class="calc-breakdown__column">8.323,69kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 5</div><div class="calc-breakdown__column">9.229,89kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 6</div><div class="calc-breakdown__column">10.168,38kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 7</div><div class="calc-breakdown__column">11.140,29kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 8</div><div class="calc-breakdown__column">12.146,81kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 9</div><div class="calc-breakdown__column">13.189,19kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 10</div><div class="calc-breakdown__column">14.268,70kr.</div></div></div> </div> </div> </div> <div style="display:none;"> <div style="display: none;" id="title_label" data-txt="Renters rente"></div> <div style="display: none;" id="subtitle_label" data-txt="af bregnskov.dk"></div> <div style="display: none;" id="line_label" data-txt="Linje"></div> <div style="display: none;" id="bars_label" data-txt="Bars"></div> <div style="display: none;" id="restore_label" data-txt="Gendan"></div> <div style="display: none;" id="view_label" data-txt="Datavisning"></div> <div style="display: none;" id="close_label" data-txt="Luk"></div> <div style="display: none;" id="reset_label" data-txt="Nulstil"></div> <div style="display: none;" id="image_label" data-txt="Download"></div><div style="display: none;" id="balance_label" data-txt="Balance"></div> <div style="display: none;" id="years_label" data-txt="År"></div> <div style="display: none;" id="months_label" data-txt="måneder"></div> <div style="display: none;" id="month_label" data-txt="måned"></div> <div style="display: none;" id="days_label" data-txt="Day"></div> <div style="display: none;" id="cur_label" data-txt="kr"></div> </div></div>
<script id="echarts-js-after">(function () {
setTimeout(function() {renderJsMain();
function renderJsMain(){let txt1 = document.getElementById("title_label").getAttribute('data-txt');let txt2 = document.getElementById("subtitle_label").getAttribute('data-txt');let txt3 = document.getElementById("line_label").getAttribute('data-txt');let txt4 = document.getElementById("bars_label").getAttribute('data-txt');let txt5 = document.getElementById("restore_label").getAttribute('data-txt');let txt6 = document.getElementById("view_label").getAttribute('data-txt');let txt7 = document.getElementById("close_label").getAttribute('data-txt');let txt8 = document.getElementById("reset_label").getAttribute('data-txt');let txt9 = document.getElementById("image_label").getAttribute('data-txt');let txt10 = document.getElementById("balance_label").getAttribute('data-txt');let yearText = document.getElementById("years_label").getAttribute('data-txt');let monthsText = document.getElementById("months_label").getAttribute('data-txt');let monthText = document.getElementById("month_label").getAttribute('data-txt');let daysText = document.getElementById("days_label").getAttribute('data-txt');let txt12 = document.getElementById("cur_label").getAttribute('data-txt');let decimalsShow = document.querySelector('.calc-options').getAttribute('js-data-hide-decimals');let local = document.documentElement.lang;let localOptions = {minimumFractionDigits: 2
};if(decimalsShow == 1){localOptions = {minimumFractionDigits: 0
};}let optionsBlock = document.querySelector('.calc-options');let periodValueElem = optionsBlock.querySelector('[js-period-value]');let periodValue = Number(periodValueElem.value);let periodValueMax = Number(periodValueElem.getAttribute('max'));let periodValueMin = Number(periodValueElem.getAttribute('min'));let periodTokenElem = optionsBlock.querySelector('[js-period-token]');let periodToken = periodTokenElem.value;let initialBalanceElem = optionsBlock.querySelector('[js-initial-balance]');let initialBalance = Number(initialBalanceElem.value);let initialBalanceMax = Number(initialBalanceElem.getAttribute('max'));let initialBalanceMin = Number(initialBalanceElem.getAttribute('min'));let percentYieldElem = optionsBlock.querySelector('[js-percent-yield]');let percentYield = Number(percentYieldElem.value);let percentYieldMax = Number(percentYieldElem.getAttribute('max'));let percentYieldMin = Number(percentYieldElem.getAttribute('min'));let interest = percentYield/100;let contributionElem = optionsBlock.querySelector('[js-contribution]');let contribution = Number(contributionElem.value);let contributionMax = Number(contributionElem.getAttribute('max'));let contributionMin = Number(contributionElem.getAttribute('min'));let taxRateElem = optionsBlock.querySelector('[js-tax-rate]');let taxRate = Number(taxRateElem.value);let taxRateMax = Number(taxRateElem.getAttribute('max'));let taxRateMin = Number(taxRateElem.getAttribute('min'));let calculateTaxElements = optionsBlock.querySelectorAll('[js-is-calculate-tax-elem]');let calculateTax = 0;let compoundingIntervalElements = optionsBlock.querySelectorAll('[js-compound-interval-elem]');let compoundingInterval = 1;let calcTabs = document.querySelector('.calc-tabs');let investmentResultElements = calcTabs.querySelectorAll('[js-investment-format]');let finalBalanceElements = calcTabs.querySelectorAll('[js-final-balance]');let totalTaxElements = calcTabs.querySelectorAll('[js-total-tax]');let paymentFrequency = document.querySelector('.calc-options__item--payment-frequency');let calcMenu = calcTabs.querySelectorAll('[js-menu]');let calcMenuItems = calcTabs.querySelectorAll('[js-menu-item]');calcMenu.forEach(menuItem => {menuItem.addEventListener('click', function() {calcMenu.forEach(item => {item.classList.remove('calc-tabs__menu-item--active');});menuItem.classList.add('calc-tabs__menu-item--active');let active = menuItem.getAttribute('js-menu');calcMenuItems.forEach(item => {if (item.getAttribute('js-menu-item') === active) {item.classList.remove('is-hidden');} else {item.classList.add('is-hidden');}});if (active === 'line') {myChartLine.resize();}});});let breakdownElement = calcTabs.querySelector('[js-breakdown]');let tax = 0;let taxedBalance = 0;let data = [];let items = [];let previousTaxedBalance = initialBalance;let breakdown = [];let ta
ata = [];let finalBalance = initialBalance;let isCalculateTax = 0;var myChartBars = echarts.init(document.getElementById('compoundBarsChart'));var myChartLine = echarts.init(document.getElementById('compoundLineChart'));var dataAxis = [];var yMax = Math.round((finalBalance + 0.00001) * 100) / 100;var dataShadow = [];periodValueElem.addEventListener('keyup', function () {if(this.value != ''){setTimeout(() => {periodValue = Number(this.value);if (periodValue > periodValueMax) {periodValue = periodValueMax;}if (periodValue < periodValueMin) {periodValue = periodValueMin;}periodValueElem.value = periodValue;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);}else{periodValueElem.addEventListener('focusout', function(){setTimeout(() => {periodValue = Number(this.value);if (periodValue > periodValueMax) {periodValue = periodValueMax;}if (periodValue < periodValueMin) {periodValue = periodValueMin;}periodValueElem.value = periodValue;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});initialBalanceElem.addEventListener('keyup', function () {if(this.value != ''){initialBalanceElem.addEventListener('focusout', function(){setTimeout(() => {initialBalance = Number(this.value);if (initialBalance > initialBalanceMax) {initialBalance = initialBalanceMax;}if (initialBalance < initialBalanceMin) {initialBalance = initialBalanceMin;}initialBalanceElem.value = initialBalance;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});percentYieldElem.addEventListener('keyup', function () {if(this.value != ''){percentYieldElem.addEventListener('focusout', function(){setTimeout(() => {percentYield = Number(this.value);if (percentYield > percentYieldMax) {percentYield = percentYieldMax;}if (percentYield < percentYieldMin) {percentYield = percentYieldMin;}percentYieldElem.value = percentYield;interest = percentYield / 100;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});contributionElem.addEventListener('keyup', function () {if(this.value != ''){contributionElem.addEventListener('focusout', function(){setTimeout(() => {contribution = Number(this.value);if (contribution > contributionMax) {contribution = contributionMax;}if (contribution < contributionMin) {contribution = contributionMin;}contributionElem.value = contribution;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});taxRateElem.addEventListener('keyup', function () {if(this.value != ''){taxRateElem.addEventListener('focusout', function(){setTimeout(() => {taxRate = Number(this.value);if (taxRate > taxRateMax) {taxRate = taxRateMax;}if (taxRate < taxRateMin) {taxRate = taxRateMin;}taxRateElem.value = taxRate;if (isCalculateTax) {calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,taxRate
);}}, 1000);});}});calculateTaxElements.forEach(item => {item.addEventListener('click', function () {calculateTaxElements.forEach(item => {item.classList.remove('calc-options__radio-label--active');});this.classList.add('calc-options__radio-label--active');isCalculateTax = Number(this.querySelector('[js-is-calculate-tax]').value);if (isCalculateTax) {tax = taxRate;} else {tax = 0;}calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);});});compoundingIntervalElements.forEach(item => {item.addEventListener('click', function () {compoundingIntervalElements.forEach(item => {item.classList.remove('calc-options__radio-label--active');});this.classList.add('calc-options__radio-label--active');compoundingInterval = Number(this.querySelector('[js-compound-interval]').value);calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);});});periodTokenElem.addEventListener('change', function () {periodToken = this.value;
calculateFinalBalance(initialBalance, interest, compoundingInterval, periodToken, periodValue, contribution, tax);});
typePeriod = 'year';let usrDate = new Date();usrDate.setDate(1);if( typePeriod === 'year' ) {for (var i = 1; i <= periodValue; i++) {let year = usrDate.getFullYear();dataAxis.push(year);usrDate.setFullYear(usrDate.getFullYear()+1);}} else {for (var i = 1; i <= data.length; i++) {let year = usrDate.getFullYear();dataAxis.push(year);usrDate.setFullYear(usrDate.getFullYear()+1);}}yearsList = dataAxis;yMax = Math.round((finalBalance + 0.00001) * 100) / 100;for (let i = 0; i < data.length; i++) {dataShadow.push(yMax);}optionBars = {baseOption: {toolbox: {left: 'right',itemSize: 20,showTitle: true,feature: {myRestore: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-company-list-button.svg',title: txt5,onclick: function() {restoreDefault();}},saveAsImage: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-download-blue.svg',title: txt9,pixelRatio: '2'
},}},color: ['#bb5050','#2098ce', '#0e4b66'],tooltip : {trigger: 'item',formatter: function(params) {var formatted = parseFloat(params.value).toLocaleString(local, localOptions);output = params.name + ': ' + formatted + "kr.";return output;}},xAxis: {data: dataAxis,nameLocation: 'end',nameRotate: '90',axisLabel: {inside: false,textStyle: {color: '#999'
}},axisTick: {show: false
},axisLine: {show: false
},z: 10
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLine: {show: false
},axisTick: {show: false
},axisLabel: {textStyle: {color: '#999'
},formatter: function (value, index) {var milvalue = value;if (value > 999) {milvalue = value/1000 + ' k';}if (value > 999999) {milvalue = value/1000000 + ' M';}if (value > 999999999) {milvalue = value/1000000000 + ' B';}if (value > 999999999999) {milvalue = value/1000000000000 + ' T';}return milvalue;}}},dataZoom: [
{type: 'inside'
}],series : [
{type: 'bar',itemStyle: {normal: {color: 'rgba(0,0,0,0.05)'}},barGap:'-100%',barCategoryGap:'40%',data: dataShadow,animation: false,tooltip: {show: false}},{type: 'bar',stack: 'total',itemStyle: {normal: {color: '#60d394'
},},animation: true
},{type: 'bar',stack: 'total',itemStyle: {normal: {color: '#d34a4a',},},data: ta
ata,animation: true
}]
},media: [
{option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'end',nameRotate: '90',nameGap: '15'
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLabel: {fontSize: '12',textStyle: {color: '#999'
}}}}},{query: {maxWidth: 450},option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'center',nameRotate: '0',nameGap: '30'
},yAxis: {nameLocation: 'end',nameRotate: '0',nameGap: '15',axisLabel: {align: 'center',fontSize: '10',textStyle: {color: '#999'
}}}}}]
};optionLine = {baseOption: {toolbox: {left: 'right',itemSize: 20,showTitle: true,feature: {restore: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-company-list-button.svg',title: txt5
},saveAsImage: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-download-blue.svg',title: txt9,pixelRatio: '2'
},}},color: ['#bb5050','#2098ce', '#0e4b66'],tooltip : {trigger: 'item',formatter: function(params) {var formatted = parseFloat(params.value).toLocaleString(local, localOptions);var output = params.name + ': ' + formatted + "kr.";return output;}},xAxis: {data: dataAxis,nameLocation: 'end',nameRotate: '90',axisLabel: {inside: false,textStyle: {color: '#999'
}},axisTick: {show: false
},axisLine: {show: false
},z: 10
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLine: {show: false
},axisTick: {show: false
},axisLabel: {textStyle: {color: '#999'
},formatter: function (value, index) {var milvalue = value;if (value > 999) {milvalue = value/1000 + ' k';}if (value > 999999) {milvalue = value/1000000 + ' M';}if (value > 999999999) {milvalue = value/1000000000 + ' B';}if (value > 999999999999) {milvalue = value/1000000000000 + ' T';}return milvalue;}}},dataZoom: [
{type: 'inside'
}],series : [
{type: 'line',stack: 'total',symbolSize: 8,itemStyle: {normal: {color: '#60d394'
},},animation: true
},]
},media: [
{option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'end',nameRotate: '90',nameGap: '15'
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLabel: {fontSize: '12',textStyle: {color: '#999'
}}}}},{query: {maxWidth: 450},option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'center',nameRotate: '0',nameGap: '30'
},yAxis: {nameLocation: 'end',nameRotate: '0',nameGap: '15',axisLabel: {align: 'center',fontSize: '10',textStyle: {color: '#999'
}}}}}]
};myChartBars.setOption(optionBars);myChartLine.setOption(optionLine);document.querySelector('.calc-options__radio-label--active').click();calculateFinalBalance(initialBalance, interest, compoundingInterval, periodToken, periodValue, contribution, tax);function restoreDefault(){let savingPeriodNum = document.getElementById('savingPeriodLabel').getAttribute('value');let savingPeriod = document.querySelector('.calc-options__select');let percentYield = document.getElementById('percentYieldLabel').getAttribute('value');let taxRate = document.getElementById('taxRateLabel').getAttribute('value');let initialBalance = document.getElementById('initialBalanceLabel').getAttribute('value');let monthlyContribution = document.getElementById('monthlyContributionLabel').getAttribute('value');document.getElementById('savingPeriodLabel').value = savingPeriodNum;document.getElementById('percentYieldLabel').value = percentYield;document.getElementById('taxRateLabel').value = taxRate;document.getElementById('initialBalanceLabel').value = initialBalance;document.getElementById('monthlyContributionLabel').value = monthlyContribution;savingPeriod.querySelector('option').setAttribute('selected','true');document.querySelectorAll('[js-is-calculate-tax-elem]')[1].click();renderJsMain();}
function calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
) {let totalTax = 0;let yTax = 0;let balance = initialBalance;let investment = 0;let investmentFormat, totalTaxFormat, taxedBalanceFormat;data = [];dataShadow = [];ta
ata = [];let dataAxis = [];let usrDate = new Date();previousTaxedBalance = initialBalance;let fullYears = 0;let extraMonths = 0;let extraDays = 0;let counterDays = 0;if (periodToken === 'year') {periodValue = periodValue * 12;fullYears = Math.floor(periodValue / 12);} else if(periodToken === 'month'){extraMonths = periodValue;}else if(periodToken === 'days'){extraDays = periodValue;}
if(initialBalance === 0){if ((periodToken === 'month') || (periodToken === 'days')) {balance = contribution;}}if (fullYears) {for (let i = 0; i < fullYears; i++) {if (compoundingInterval === 1) {balance = balance * (1 + interest) + ((12 * contribution) * ( 1 + interest ));} else if (compoundingInterval === 3) {for (let q = 0; q < 4; q++) {balance = balance * (1 + interest/4) + 3 * contribution;}} else if (compoundingInterval === 12) {for (let m = 0; m < 12; m++) {balance = balance * (1 + interest/12) + contribution;}} else if (compoundingInterval === 360) {for (let d = 1; d < 361; d++) {balance = balance * (1 + interest/360);if (d % 30 === 0) {balance = balance + contribution;}}}if (tax > 0 && interest > 0) {yTax = (balance - previousTaxedBalance - ( 12 * contribution)) * tax / 100;taxedBalance = (balance - yTax).toFixed(2);if(decimalsShow == 1){taxedBalance = Math.round(balance - yTax);data.push(Math.round(taxedBalance));}else{data.push((Math.round(taxedBalance)).toFixed(2));}} else {yTax = 0;taxedBalance = balance;if(decimalsShow == 1){taxedBalance = Math.round(balance);data.push(Math.round(balance));}else{data.push((Math.round((balance + 0.00001) * 100) / 100).toFixed(2));}}items.push({year: i, balance: balance, tax: yTax});ta
ata.push(Math.round((yTax + 0.00001) * 100) / 100);totalTax = totalTax + yTax;balance = taxedBalance;previousTaxedBalance = taxedBalance;if(decimalsShow == 1){totalTax = Math.round(totalTax + yTax);balance = Math.round(taxedBalance);previousTaxedBalance = Math.round(taxedBalance);}}}if (extraMonths) {let balanceForTax;for (let i = 0; i <= extraMonths; i++) {if (0 === i) {balance = (balance) * Math.pow((1 + interest) , 1/12) ;} else {balance = (balance + contribution) * Math.pow((1 + interest) , 1/12);}if (tax > 0 && interest > 0) {if (0 === i) {balanceForTax = balance - previousTaxedBalance;} else {balanceForTax = balance - previousTaxedBalance - contribution;}yTax = balanceForTax * (tax/100/12);taxedBalance = balance - yTax;if (i > 0){if(decimalsShow == 1){taxedBalance = Math.round(balance - yTax);data.push(Math.round(taxedBalance));}else{data.push((Math.round((taxedBalance + 0.00001) * 100) / 100).toFixed(2));}}} else {yTax = 0;taxedBalance = balance;if(decimalsShow == 1){taxedBalance = Math.round(balance);}if (i > 0){if(decimalsShow == 1){taxedBalance = Math.round(balance);data.push(Math.round(balance));}else{data.push((Math.round((balance + 0.00001) * 100) / 100).toFixed(2));}}}if (i > 0){items.push({year: i, balance: balance, tax: yTax});ta
ata.push(Math.round((yTax + 0.00001) * 100) / 100);}totalTax = totalTax + yTax;balance = taxedBalance;previousTaxedBalance = taxedBalance;if(decimalsShow == 1){totalTax = Math.round(totalTax + yTax);balance = Math.round(taxedBalance);previousTaxedBalance = Math.round(taxedBalance);}}}if (extraDays) {yTax = 0;let firstDayYearBalance = 0;for (let i = 0; i < extraDays; i++) {if (0 === i) {firstDayYearBalance = initialBalance;balance = (balance) * Math.pow((1 + interest) , 1/360).toFixed(3) ;} else if (( i % 30 === 0 ) && ( i > 0 )) {counterDays = counterDays + 1;balance = (balance + contribution) * Math.pow((1 + interest) , 1/360).toFixed(3) ;} else {balance = balance * Math.pow((1 + interest) , 1/360).toFixed(3);}if ((tax > 0) && (interest > 0)){if (( i % 360 === 0 ) && ( i > 0 )){if(i === 360){yTax = ( balance - firstDayYearBalance - 12 * contribution ) * ( tax / 100 );taxedBalance = balance - yTax;firstDayYearBalance = taxedBalance;}else{yTax = ( balance - firstDayYearBalance - 12 * contribution ) * ( tax / 100);taxedBalance = balance - yTax;}if(decimalsShow == 1){data.push(Math.round(taxedBalance));}else{data.push((Math.round(taxedBalance)).toFixed(2));}} else {yTax = 0;taxedBalance = balance;if(decimalsShow == 1){taxedBalance = Math.round(balance);data.push(Math.round(balance));}else{data.push((Math.round((balance + 0.00001) * 100) / 100).toFixed(2));}}} else {yTax = 0;taxedBalance = balance;if(decimalsShow == 1){taxedBalance = Math.round(balance);data.push(Math.round(balance));}else{data.push((Math.round((balance + 0.00001) * 100) / 100).toFixed(2));}}items.push({year: i,balance: balance,tax: yTax
});ta
ata.push((Math.round((yTax + 0.00001) * 100) / 100).toFixed(2));totalTax = totalTax + yTax;balance = taxedBalance;previousTaxedBalance = taxedBalance;}}if (extraMonths) {for (var i = 1; i <= data.length; i++) {dataAxis.push( monthText + ' ' + i);}} else if (fullYears){for (var i = 1; i <= data.length; i++) {dataAxis.push(yearText + ' ' + i);}} else {for (var i = 1; i <= data.length; i++) {dataAxis.push(daysText + ' ' + i);}}finalBalance = balance;taxedBalance = parseFloat(taxedBalance);investment = initialBalance + (periodValue * contribution);if (extraDays){investment = initialBalance + (counterDays * contribution);if ( counterDays * contribution > 0 ){balance = (initialBalance * Math.pow((1 + interest) , 1/12/30)) + initialBalance;} else {balance = (balance + contribution) * Math.pow((1 + interest) , 1/12/30);}}yMax = Math.round((finalBalance + 0.00001) * 100) / 100;if(decimalsShow == 1){yMax = Math.round(finalBalance);}for (let i = 0; i < data.length; i++) {dataShadow.push(yMax);}if(decimalsShow == 1){investmentFormat = Math.round(investment).toLocaleString(local, localOptions);totalTaxFormat = Math.round(totalTax).toLocaleString(local, localOptions);taxedBalanceFormat = Math.round(taxedBalance).toLocaleString(local, localOptions);breakdown = data.map(item => Math.round(item).toLocaleString(local, localOptions));}else{investmentFormat = parseFloat(investment.toFixed(2)).toLocaleString(local, localOptions);totalTaxFormat = parseFloat(totalTax.toFixed(2)).toLocaleString(local, localOptions);taxedBalanceFormat = parseFloat(taxedBalance.toFixed(2)).toLocaleString(local, localOptions);breakdown = data.map(item => parseFloat(item).toLocaleString(local, localOptions));}let breakdownHtml = '';breakdown.forEach(function (value, index) {breakdownHtml += '<div class="calc-breakdown__row">';breakdownHtml += '<div class="calc-breakdown__column">' + dataAxis[index] + '</div>';breakdownHtml += '<div class="calc-breakdown__column">' + value + "kr." + '</div>';breakdownHtml += '</div>';});breakdownElement.innerHTML = breakdownHtml;let optionBarsData = {baseOption: {series : [
{data: dataShadow},{data: data},{data: ta
ata}]
}};let optionBarsDataAxis = {baseOption: {xAxis: {data: dataAxis}}};let optionLineData = {baseOption: {series : [
{data: data}]
}};myChartBars.setOption(optionBarsData);myChartBars.setOption(optionBarsDataAxis);myChartLine.setOption(optionLineData);myChartLine.setOption(optionBarsDataAxis);investmentResultElements.forEach(item => {item.innerHTML = investmentFormat;});totalTaxElements.forEach(item => {item.innerHTML = totalTaxFormat;});finalBalanceElements.forEach(item => {item.innerHTML = taxedBalanceFormat;});}}}, 1000);;})();</script>
<script data-minify="1" src="chart.js" id="echarts-js" defer=""></script>
<div class="calc"> <div class="calc-options" js-data-hide-decimals=""> <div class="calc-options__item calc-options__item--saving-period"> <label for="savingPeriodLabel" class="calc-options__label">Opsparingsperiode </label> <div class="calc-options__field"> <input id="savingPeriodLabel" class="calc-options__input" type="number" name="input" min="0" max="99" value="10" js-period-value=""> <select class="calc-options__select" js-period-token="" aria-labelledby="savingPeriodLabel"> <option value="year">år</option> <option value="month">Måneder</option><option value="days">dage</option> </select> </div> </div> <div class="calc-options__item calc-options__item--saving-initial-balance"> <label for="initialBalanceLabel" class="calc-options__label">Startbeløb</label> <div class="calc-options__field calc-options__field--label-right" data-label=" kr."> <input id="initialBalanceLabel" class="calc-options__input" type="number" name="input" min="0" max="10000000" value="1000" js-initial-balance=""> </div> </div> <div class="calc-options__item calc-options__item--saving-percent-yield"> <label for="percentYieldLabel" class="calc-options__label">Opsparingsrente</label> <div class="calc-options__field calc-options__field--label-right" data-label="%"> <input id="percentYieldLabel" class="calc-options__input" type="number" name="input" min="0" max="100" step="0.01" use-decimals="" value="4" js-percent-yield=""> </div> </div> <div class="calc-options__item calc-options__item--saving-monthly-contribution"> <label for="monthlyContributionLabel" class="calc-options__label">Opsparet beløb per måned</label> <div class="calc-options__field calc-options__field--label-right" data-label=" kr."> <input id="monthlyContributionLabel" class="calc-options__input" type="number" name="input" min="0" max="9999999" value="100" js-contribution=""> </div> </div> <div class="calc-options__item calc-options__item--saving-tax-rate"> <label for="taxRateLabel" class="calc-options__label">Skatteprocent</label> <div class="calc-options__field calc-options__field--label-right" data-label="%"> <input id="taxRateLabel" class="calc-options__input" type="number" name="input" min="0" max="100" step="0.01" use-decimals="" value="0" js-tax-rate=""> </div> </div> <div class="calc-options__item calc-options__item--saving-calculate-tax"> <label class="calc-options__label">Medregn skat?</label> <div class="calc-options__field"> <label class="calc-options__radio-label calc-options__radio-label--circle calc-options__radio-label--active" js-is-calculate-tax-elem="" for="calculate-tax-on"> Ja <input type="radio" name="calculate-tax-on" value="1" js-is-calculate-tax=""> </label> <label class="calc-options__radio-label calc-options__radio-label--circle" js-is-calculate-tax-elem="" for="calculate-tax-off"> Nej <input type="radio" name="calculate-tax-off" value="0" js-is-calculate-tax=""> </label> </div> </div> <div class="calc-options__item calc-options__item--payment-frequency"> <label class="calc-options__label">Rentetilskrivning</label> <div class="calc-options__field"> <label class="calc-options__radio-label" js-compound-interval-elem=""> Årlig <input type="radio" value="1" js-compound-interval=""> </label> <label class="calc-options__radio-label" js-compound-interval-elem=""> Kvartilvis <input type="radio" value="3" js-compound-interval=""> </label> <label class="calc-options__radio-label" js-compound-interval-elem=""> Månedlig <input type="radio" value="12" js-compound-interval=""> </label> <label class="calc-options__radio-label calc-options__radio-label--active" js-compound-interval-elem=""> Daglig <input type="radio" value="360" js-compound-interval=""> </label> </div> </div> </div> <div class="calc-tabs"> <div class="calc-tabs__menu"> <span class="calc-tabs__menu-item calc-tabs__menu-item--active" js-menu="bars">Bars</span> <span class="calc-tabs__menu-item" js-menu="line">Linje</span> <span class="calc-tabs__menu-item" js-menu="breakdown">Tabel</span> </div> <div class="calc-tabs__content" js-menu-item="bars"> <div id="compoundBarsChart" style="max-width: 730px; width: 100%; height: 350px; margin: auto; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1676965596482"><div style="position: relative; width: 730px; height: 350px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;"><canvas data-zr-dom-id="zr_0" width="730" height="350" style="position: absolute; left: 0px; top: 0px; width: 730px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class="" style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); font: 14px / 21px "Microsoft YaHei"; padding: 10px; top: 0px; left: 0px; transform: translate3d(372px, 166px, 0px); border-color: rgb(96, 211, 148); pointer-events: none; visibility: hidden; opacity: 0;">År 5: 9.229,89kr.</div></div> <div class="calc-chart__footer"> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Investering</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-investment-format="">11.000,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Samlet skat</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-total-tax="">0,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Indtjent beløb</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-final-balance="">14.268,70</span> kr.</strong> </span> </span> </div> </div> </div> <div class="calc-tabs__content is-hidden" js-menu-item="line"> <div id="compoundLineChart" style="max-width: 730px; width: 100%; height: 350px; margin: auto; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1676965596483"><div style="position: relative; width: 481px; height: 350px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="481" height="350" style="position: absolute; left: 0px; top: 0px; width: 481px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div> <div class="calc-chart__footer"> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Investering</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-investment-format="">11.000,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Samlet skat</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-total-tax="">0,00</span> kr.</strong> </span> </span> </div> <div class="calc-chart__footer-item"> <span class="calc-chart__footer-title">Indtjent beløb</span> <span class="calc-chart__footer-value"> <span class="calc-chart__footer-currency"> <strong><span js-final-balance="">14.268,70</span> kr.</strong> </span> </span> </div> </div> </div> <div class="calc-tabs__content is-hidden" js-menu-item="breakdown"> <div class="calc-breakdown calc-breakdown--interest-calculator"> <div class="calc-breakdown__row calc-breakdown__row--header"> <div class="calc-breakdown__column">År</div> <div class="calc-breakdown__column">Balance</div> </div> <div js-breakdown=""><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 1</div><div class="calc-breakdown__column">5.787,82kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 2</div><div class="calc-breakdown__column">6.603,71kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 3</div><div class="calc-breakdown__column">7.448,65kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 4</div><div class="calc-breakdown__column">8.323,69kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 5</div><div class="calc-breakdown__column">9.229,89kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 6</div><div class="calc-breakdown__column">10.168,38kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 7</div><div class="calc-breakdown__column">11.140,29kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 8</div><div class="calc-breakdown__column">12.146,81kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 9</div><div class="calc-breakdown__column">13.189,19kr.</div></div><div class="calc-breakdown__row"><div class="calc-breakdown__column">År 10</div><div class="calc-breakdown__column">14.268,70kr.</div></div></div> </div> </div> </div> <div style="display:none;"> <div style="display: none;" id="title_label" data-txt="Renters rente"></div> <div style="display: none;" id="subtitle_label" data-txt="af bregnskov.dk"></div> <div style="display: none;" id="line_label" data-txt="Linje"></div> <div style="display: none;" id="bars_label" data-txt="Bars"></div> <div style="display: none;" id="restore_label" data-txt="Gendan"></div> <div style="display: none;" id="view_label" data-txt="Datavisning"></div> <div style="display: none;" id="close_label" data-txt="Luk"></div> <div style="display: none;" id="reset_label" data-txt="Nulstil"></div> <div style="display: none;" id="image_label" data-txt="Download"></div><div style="display: none;" id="balance_label" data-txt="Balance"></div> <div style="display: none;" id="years_label" data-txt="År"></div> <div style="display: none;" id="months_label" data-txt="måneder"></div> <div style="display: none;" id="month_label" data-txt="måned"></div> <div style="display: none;" id="days_label" data-txt="Day"></div> <div style="display: none;" id="cur_label" data-txt="kr"></div> </div></div>
<script id="echarts-js-after">(function () {
setTimeout(function() {renderJsMain();
function renderJsMain(){let txt1 = document.getElementById("title_label").getAttribute('data-txt');let txt2 = document.getElementById("subtitle_label").getAttribute('data-txt');let txt3 = document.getElementById("line_label").getAttribute('data-txt');let txt4 = document.getElementById("bars_label").getAttribute('data-txt');let txt5 = document.getElementById("restore_label").getAttribute('data-txt');let txt6 = document.getElementById("view_label").getAttribute('data-txt');let txt7 = document.getElementById("close_label").getAttribute('data-txt');let txt8 = document.getElementById("reset_label").getAttribute('data-txt');let txt9 = document.getElementById("image_label").getAttribute('data-txt');let txt10 = document.getElementById("balance_label").getAttribute('data-txt');let yearText = document.getElementById("years_label").getAttribute('data-txt');let monthsText = document.getElementById("months_label").getAttribute('data-txt');let monthText = document.getElementById("month_label").getAttribute('data-txt');let daysText = document.getElementById("days_label").getAttribute('data-txt');let txt12 = document.getElementById("cur_label").getAttribute('data-txt');let decimalsShow = document.querySelector('.calc-options').getAttribute('js-data-hide-decimals');let local = document.documentElement.lang;let localOptions = {minimumFractionDigits: 2
};if(decimalsShow == 1){localOptions = {minimumFractionDigits: 0
};}let optionsBlock = document.querySelector('.calc-options');let periodValueElem = optionsBlock.querySelector('[js-period-value]');let periodValue = Number(periodValueElem.value);let periodValueMax = Number(periodValueElem.getAttribute('max'));let periodValueMin = Number(periodValueElem.getAttribute('min'));let periodTokenElem = optionsBlock.querySelector('[js-period-token]');let periodToken = periodTokenElem.value;let initialBalanceElem = optionsBlock.querySelector('[js-initial-balance]');let initialBalance = Number(initialBalanceElem.value);let initialBalanceMax = Number(initialBalanceElem.getAttribute('max'));let initialBalanceMin = Number(initialBalanceElem.getAttribute('min'));let percentYieldElem = optionsBlock.querySelector('[js-percent-yield]');let percentYield = Number(percentYieldElem.value);let percentYieldMax = Number(percentYieldElem.getAttribute('max'));let percentYieldMin = Number(percentYieldElem.getAttribute('min'));let interest = percentYield/100;let contributionElem = optionsBlock.querySelector('[js-contribution]');let contribution = Number(contributionElem.value);let contributionMax = Number(contributionElem.getAttribute('max'));let contributionMin = Number(contributionElem.getAttribute('min'));let taxRateElem = optionsBlock.querySelector('[js-tax-rate]');let taxRate = Number(taxRateElem.value);let taxRateMax = Number(taxRateElem.getAttribute('max'));let taxRateMin = Number(taxRateElem.getAttribute('min'));let calculateTaxElements = optionsBlock.querySelectorAll('[js-is-calculate-tax-elem]');let calculateTax = 0;let compoundingIntervalElements = optionsBlock.querySelectorAll('[js-compound-interval-elem]');let compoundingInterval = 1;let calcTabs = document.querySelector('.calc-tabs');let investmentResultElements = calcTabs.querySelectorAll('[js-investment-format]');let finalBalanceElements = calcTabs.querySelectorAll('[js-final-balance]');let totalTaxElements = calcTabs.querySelectorAll('[js-total-tax]');let paymentFrequency = document.querySelector('.calc-options__item--payment-frequency');let calcMenu = calcTabs.querySelectorAll('[js-menu]');let calcMenuItems = calcTabs.querySelectorAll('[js-menu-item]');calcMenu.forEach(menuItem => {menuItem.addEventListener('click', function() {calcMenu.forEach(item => {item.classList.remove('calc-tabs__menu-item--active');});menuItem.classList.add('calc-tabs__menu-item--active');let active = menuItem.getAttribute('js-menu');calcMenuItems.forEach(item => {if (item.getAttribute('js-menu-item') === active) {item.classList.remove('is-hidden');} else {item.classList.add('is-hidden');}});if (active === 'line') {myChartLine.resize();}});});let breakdownElement = calcTabs.querySelector('[js-breakdown]');let tax = 0;let taxedBalance = 0;let data = [];let items = [];let previousTaxedBalance = initialBalance;let breakdown = [];let ta

initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);}else{periodValueElem.addEventListener('focusout', function(){setTimeout(() => {periodValue = Number(this.value);if (periodValue > periodValueMax) {periodValue = periodValueMax;}if (periodValue < periodValueMin) {periodValue = periodValueMin;}periodValueElem.value = periodValue;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});initialBalanceElem.addEventListener('keyup', function () {if(this.value != ''){initialBalanceElem.addEventListener('focusout', function(){setTimeout(() => {initialBalance = Number(this.value);if (initialBalance > initialBalanceMax) {initialBalance = initialBalanceMax;}if (initialBalance < initialBalanceMin) {initialBalance = initialBalanceMin;}initialBalanceElem.value = initialBalance;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});percentYieldElem.addEventListener('keyup', function () {if(this.value != ''){percentYieldElem.addEventListener('focusout', function(){setTimeout(() => {percentYield = Number(this.value);if (percentYield > percentYieldMax) {percentYield = percentYieldMax;}if (percentYield < percentYieldMin) {percentYield = percentYieldMin;}percentYieldElem.value = percentYield;interest = percentYield / 100;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});contributionElem.addEventListener('keyup', function () {if(this.value != ''){contributionElem.addEventListener('focusout', function(){setTimeout(() => {contribution = Number(this.value);if (contribution > contributionMax) {contribution = contributionMax;}if (contribution < contributionMin) {contribution = contributionMin;}contributionElem.value = contribution;calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);}, 1000);});}});taxRateElem.addEventListener('keyup', function () {if(this.value != ''){taxRateElem.addEventListener('focusout', function(){setTimeout(() => {taxRate = Number(this.value);if (taxRate > taxRateMax) {taxRate = taxRateMax;}if (taxRate < taxRateMin) {taxRate = taxRateMin;}taxRateElem.value = taxRate;if (isCalculateTax) {calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,taxRate
);}}, 1000);});}});calculateTaxElements.forEach(item => {item.addEventListener('click', function () {calculateTaxElements.forEach(item => {item.classList.remove('calc-options__radio-label--active');});this.classList.add('calc-options__radio-label--active');isCalculateTax = Number(this.querySelector('[js-is-calculate-tax]').value);if (isCalculateTax) {tax = taxRate;} else {tax = 0;}calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);});});compoundingIntervalElements.forEach(item => {item.addEventListener('click', function () {compoundingIntervalElements.forEach(item => {item.classList.remove('calc-options__radio-label--active');});this.classList.add('calc-options__radio-label--active');compoundingInterval = Number(this.querySelector('[js-compound-interval]').value);calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
);});});periodTokenElem.addEventListener('change', function () {periodToken = this.value;
calculateFinalBalance(initialBalance, interest, compoundingInterval, periodToken, periodValue, contribution, tax);});
typePeriod = 'year';let usrDate = new Date();usrDate.setDate(1);if( typePeriod === 'year' ) {for (var i = 1; i <= periodValue; i++) {let year = usrDate.getFullYear();dataAxis.push(year);usrDate.setFullYear(usrDate.getFullYear()+1);}} else {for (var i = 1; i <= data.length; i++) {let year = usrDate.getFullYear();dataAxis.push(year);usrDate.setFullYear(usrDate.getFullYear()+1);}}yearsList = dataAxis;yMax = Math.round((finalBalance + 0.00001) * 100) / 100;for (let i = 0; i < data.length; i++) {dataShadow.push(yMax);}optionBars = {baseOption: {toolbox: {left: 'right',itemSize: 20,showTitle: true,feature: {myRestore: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-company-list-button.svg',title: txt5,onclick: function() {restoreDefault();}},saveAsImage: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-download-blue.svg',title: txt9,pixelRatio: '2'
},}},color: ['#bb5050','#2098ce', '#0e4b66'],tooltip : {trigger: 'item',formatter: function(params) {var formatted = parseFloat(params.value).toLocaleString(local, localOptions);output = params.name + ': ' + formatted + "kr.";return output;}},xAxis: {data: dataAxis,nameLocation: 'end',nameRotate: '90',axisLabel: {inside: false,textStyle: {color: '#999'
}},axisTick: {show: false
},axisLine: {show: false
},z: 10
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLine: {show: false
},axisTick: {show: false
},axisLabel: {textStyle: {color: '#999'
},formatter: function (value, index) {var milvalue = value;if (value > 999) {milvalue = value/1000 + ' k';}if (value > 999999) {milvalue = value/1000000 + ' M';}if (value > 999999999) {milvalue = value/1000000000 + ' B';}if (value > 999999999999) {milvalue = value/1000000000000 + ' T';}return milvalue;}}},dataZoom: [
{type: 'inside'
}],series : [
{type: 'bar',itemStyle: {normal: {color: 'rgba(0,0,0,0.05)'}},barGap:'-100%',barCategoryGap:'40%',data: dataShadow,animation: false,tooltip: {show: false}},{type: 'bar',stack: 'total',itemStyle: {normal: {color: '#60d394'
},},animation: true
},{type: 'bar',stack: 'total',itemStyle: {normal: {color: '#d34a4a',},},data: ta

}]
},media: [
{option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'end',nameRotate: '90',nameGap: '15'
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLabel: {fontSize: '12',textStyle: {color: '#999'
}}}}},{query: {maxWidth: 450},option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'center',nameRotate: '0',nameGap: '30'
},yAxis: {nameLocation: 'end',nameRotate: '0',nameGap: '15',axisLabel: {align: 'center',fontSize: '10',textStyle: {color: '#999'
}}}}}]
};optionLine = {baseOption: {toolbox: {left: 'right',itemSize: 20,showTitle: true,feature: {restore: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-company-list-button.svg',title: txt5
},saveAsImage: {icon: 'image://'+fs.theme_uri+'/assets/images/icons-download-blue.svg',title: txt9,pixelRatio: '2'
},}},color: ['#bb5050','#2098ce', '#0e4b66'],tooltip : {trigger: 'item',formatter: function(params) {var formatted = parseFloat(params.value).toLocaleString(local, localOptions);var output = params.name + ': ' + formatted + "kr.";return output;}},xAxis: {data: dataAxis,nameLocation: 'end',nameRotate: '90',axisLabel: {inside: false,textStyle: {color: '#999'
}},axisTick: {show: false
},axisLine: {show: false
},z: 10
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLine: {show: false
},axisTick: {show: false
},axisLabel: {textStyle: {color: '#999'
},formatter: function (value, index) {var milvalue = value;if (value > 999) {milvalue = value/1000 + ' k';}if (value > 999999) {milvalue = value/1000000 + ' M';}if (value > 999999999) {milvalue = value/1000000000 + ' B';}if (value > 999999999999) {milvalue = value/1000000000000 + ' T';}return milvalue;}}},dataZoom: [
{type: 'inside'
}],series : [
{type: 'line',stack: 'total',symbolSize: 8,itemStyle: {normal: {color: '#60d394'
},},animation: true
},]
},media: [
{option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'end',nameRotate: '90',nameGap: '15'
},yAxis: {nameLocation: 'middle',nameRotate: '90',nameGap: '40',axisLabel: {fontSize: '12',textStyle: {color: '#999'
}}}}},{query: {maxWidth: 450},option: {toolbox: {left: 'right',orient: 'horizontal',top: 'top'
},xAxis: {nameLocation: 'center',nameRotate: '0',nameGap: '30'
},yAxis: {nameLocation: 'end',nameRotate: '0',nameGap: '15',axisLabel: {align: 'center',fontSize: '10',textStyle: {color: '#999'
}}}}}]
};myChartBars.setOption(optionBars);myChartLine.setOption(optionLine);document.querySelector('.calc-options__radio-label--active').click();calculateFinalBalance(initialBalance, interest, compoundingInterval, periodToken, periodValue, contribution, tax);function restoreDefault(){let savingPeriodNum = document.getElementById('savingPeriodLabel').getAttribute('value');let savingPeriod = document.querySelector('.calc-options__select');let percentYield = document.getElementById('percentYieldLabel').getAttribute('value');let taxRate = document.getElementById('taxRateLabel').getAttribute('value');let initialBalance = document.getElementById('initialBalanceLabel').getAttribute('value');let monthlyContribution = document.getElementById('monthlyContributionLabel').getAttribute('value');document.getElementById('savingPeriodLabel').value = savingPeriodNum;document.getElementById('percentYieldLabel').value = percentYield;document.getElementById('taxRateLabel').value = taxRate;document.getElementById('initialBalanceLabel').value = initialBalance;document.getElementById('monthlyContributionLabel').value = monthlyContribution;savingPeriod.querySelector('option').setAttribute('selected','true');document.querySelectorAll('[js-is-calculate-tax-elem]')[1].click();renderJsMain();}
function calculateFinalBalance(
initialBalance,interest,compoundingInterval,periodToken,periodValue,contribution,tax
) {let totalTax = 0;let yTax = 0;let balance = initialBalance;let investment = 0;let investmentFormat, totalTaxFormat, taxedBalanceFormat;data = [];dataShadow = [];ta

if(initialBalance === 0){if ((periodToken === 'month') || (periodToken === 'days')) {balance = contribution;}}if (fullYears) {for (let i = 0; i < fullYears; i++) {if (compoundingInterval === 1) {balance = balance * (1 + interest) + ((12 * contribution) * ( 1 + interest ));} else if (compoundingInterval === 3) {for (let q = 0; q < 4; q++) {balance = balance * (1 + interest/4) + 3 * contribution;}} else if (compoundingInterval === 12) {for (let m = 0; m < 12; m++) {balance = balance * (1 + interest/12) + contribution;}} else if (compoundingInterval === 360) {for (let d = 1; d < 361; d++) {balance = balance * (1 + interest/360);if (d % 30 === 0) {balance = balance + contribution;}}}if (tax > 0 && interest > 0) {yTax = (balance - previousTaxedBalance - ( 12 * contribution)) * tax / 100;taxedBalance = (balance - yTax).toFixed(2);if(decimalsShow == 1){taxedBalance = Math.round(balance - yTax);data.push(Math.round(taxedBalance));}else{data.push((Math.round(taxedBalance)).toFixed(2));}} else {yTax = 0;taxedBalance = balance;if(decimalsShow == 1){taxedBalance = Math.round(balance);data.push(Math.round(balance));}else{data.push((Math.round((balance + 0.00001) * 100) / 100).toFixed(2));}}items.push({year: i, balance: balance, tax: yTax});ta


});ta

{data: dataShadow},{data: data},{data: ta

}};let optionBarsDataAxis = {baseOption: {xAxis: {data: dataAxis}}};let optionLineData = {baseOption: {series : [
{data: data}]
}};myChartBars.setOption(optionBarsData);myChartBars.setOption(optionBarsDataAxis);myChartLine.setOption(optionLineData);myChartLine.setOption(optionBarsDataAxis);investmentResultElements.forEach(item => {item.innerHTML = investmentFormat;});totalTaxElements.forEach(item => {item.innerHTML = totalTaxFormat;});finalBalanceElements.forEach(item => {item.innerHTML = taxedBalanceFormat;});}}}, 1000);;})();</script>
<script data-minify="1" src="chart.js" id="echarts-js" defer=""></script>