JavaScript Get get the script to show a linje grapg

[wizard]

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 &quot;Microsoft YaHei&quot;; 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 taata = [];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: taata,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 = [];taata = [];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});taata.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});taata.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
});taata.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: taata}]
}};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>

 

[cbreemer]

Dumping a big amorphous blob of code with the sole comment "cant get it to work" is not going to get you any help. Would you please spend some time and effort to properly describe your problem, and post your code in a readable format inside proper code tags. We also expect that you describe what you have done or tried yourself to counter the problem.