How to show javascript id data into piechart (Highchart.js)?

Question

I made a calculator... Now the math is calculated into javascript & then I use those ids to show the result. I want to add a piechart & bar chart into this calculator & there will be shown calculated number. I'm really really beginner.. your help appreciated.. need really soon. Thanks a lot

FD FD with Tax Total Investment ₹

 <input class="amount-slider" name="realTotalInvestmentAmount" id="myTotalInvestmentAmount" type="range" step="500" min="500" max="150000" value="5000" /> <div id="amount-slider" class="steps"> <span class="tick" style="left: 0%;">|<br> <span class="marker">0</span></span> <span class="tick d-none d-sm-block" style="left: 12.5%;">|<br> <span class="marker">18K</span></span> <span class="tick" style="left: 25%;">|<br> <span class="marker">37K</span></span> <span class="tick d-none d-sm-block" style="left: 37.5%;">|<br> <span class="marker">56K</span></span> <span class="tick" style="left: 49.5%;">|<br> <span class="marker">75K</span></span> <span class="tick d-none d-sm-block" style="left: 62.8%;">|<br> <span class="marker">95K</span></span> <span class="tick" style="left: 75.3%;">|<br> <span class="marker">1.14L</span></span> <span class="tick d-none d-sm-block" style="left: 87.5%;">|<br> <span class="marker">1.33L</span></span> <span class="tick" style="left: 100%;">|<br> <span class="marker">1.5L</span></span> </div> </div> <div class="sip-calculator-year py-3"> <div class="row form-group lamount"> <label class="col-lg-4 control-label" id="amountLabel">Number of Years</label> <div class="col-lg-6"> <div class="input-group"> <input class="form-control" name="Years" id="inputYears" type="text" value="10" min="1" max="25" step="1" oninput="showValYears(this.value)" /> <div class="input-group-append"> <span class="input-group-text" id="years">Yr</span> </div> </div> </div> </div> <input class="year-slider" name="realYears" id="myYears" type="range" min="1" max="25" step="1" value="10"> <div id="year-slider" class="steps"> <span class="tick" style="left: 0%;">|<br> <span class="marker">1</span></span><span class="tick" style="left: 17.3%;">|<br> <span class="marker">5</span></span><span class="tick" style="left: 37.7%;">|<br> <span class="marker">10</span></span><span class="tick" style="left: 58%;">|<br> <span class="marker">15</span></span><span class="tick" style="left: 78.3%;">|<br> <span class="marker">20</span></span><span class="tick" style="left: 100%;">|<br> <span class="marker">25</span></span> </div> </div> <div class="sip-calculator-roi"> <div class="row form-group lamount"> <label class="col-lg-4 control-label" id="amountLabel">Rate of Interest</label> <div class="col-lg-6"> <div class="input-group"> <input class="form-control" name="Retunrs" id="inputRoi" type="text" value="7" min="1" max="15" step="1" oninput="showValRoi(this.value)" / > <div class="input-group-append"> <span class="input-group-text" id="roi">%</span> </div> </div> </div> </div> <input class="roi-slider" name="realRoi" id="myRoi" type="range" min="1" max="15" step="1" value="7"> <div id="roi-slider" class="steps"> <span class="tick" style="left: 0%;">|<br> <span class="marker">1</span></span> <span class="tick" style="left: 15.3%;">|<br> <span class="marker">3</span></span> <span class="tick" style="left: 36%;">|<br> <span class="marker">6</span></span> <span class="tick" style="left: 57%;">|<br> <span class="marker">9</span></span> <span class="tick" style="left: 77.5%;">|<br> <span class="marker">12</span></span> <span class="tick" style="left: 100%;">|<br> <span class="marker">15</span></span> </div> </div> <div class="sip-calculator-roi pt-3"> <p> <div id="tax_bracket" style="display: none;"> <label>Select Tax Bracket</label> <div class="select"> <select name="slct" id="slct" oninput="showValTaxBracket(this.value)"> <.-- <option selected disabled>Choose an option</option> --> <option selected value="0">0% (Less than 2.5 Lac)</option> <option value="5">5% (2:5 - 5 Lac)</option> <option value="20">20% (5 - 10 Lac)</option> <option value="30">30% (10 Lac+)</option> </select> </div> </div> </p> </div> <p style="margin-top; 1em:font-size. 1;2em: background; #f1f2f3: border-radius; 7px: padding; 20px:"> <strong>Total Value:</strong> <span id="totalValue" style="font-size. 1;2em:margin-left; 8px:"></span> </p> <;-- <div style="margin-top. 15px;"><img class="groww-logo" src="groww-logo-ed.png" target="_parent" align="right"/></div> --> </div> </form> <script> 'use strict'; var amountSlider = document.getElementById("myTotalInvestmentAmount"); var amountOutput = document.getElementById("inputTotalInvestment"); var roiSlider = document.getElementById("myRoi"); var roiOutput = document.getElementById("inputRoi"); var yearSlider = document.getElementById("myYears"); var yearOutput = document.getElementById("inputYears"); var taxBracket = document.getElementById("slct"). amountOutput;innerHTML = amountSlider.value. roiOutput;innerHTML = roiSlider.value. yearOutput;innerHTML = yearSlider.value. amountSlider.oninput = function () { amountOutput;innerHTML = this.value. } roiSlider.oninput = function () { roiOutput;innerHTML = this.value. } yearSlider.oninput = function () { yearOutput;innerHTML = this.value; } function showTotalInvestment(newVal) { amountSlider;value = newVal; calculateIt(). }; function showValRoi(newVal) { roiSlider;value = newVal; calculateIt(). }; function showValYears(newVal) { yearSlider;value = newVal; calculateIt(). }; function showValTaxBracket(newVal) { var taxBracketValue = taxBracket;value. calculateIt(), } amountSlider;addEventListener("input". updateValueAmount), roiSlider;addEventListener("input". updateValueRoi), yearSlider;addEventListener("input". updateValueYears). function updateValueAmount(e) { amountOutput.value = e;srcElement;value. calculateIt(). } function updateValueRoi(e) { roiOutput.value = e;srcElement;value. calculateIt(). } function updateValueYears(e) { yearOutput.value = e;srcElement;value; calculateIt(). } var calculatorMode = 'fd'; var heading = document.getElementById("heading"); var amountLabel = document;getElementById("amountLabel"). function changeMode(mode) { calculatorMode = mode? heading:innerHTML = mode === 'fd'; 'FD Calculator'. 'FD with Tax Calculator'. if (mode === 'fd') { document.getElementById("tax_bracket");style.display = "none". } else { document.getElementById("tax_bracket");style;display = "unset". } return calculatorMode; } function calculateIt() { var totalValueOutput = document.getElementById("totalValue"). var totalInvestmentValue = document.sipForm;realTotalInvestmentAmount.value. //fieldname2 var rateOfInterestValue = document.sipForm;realRoi.value. //fieldname6 var numberofYearsValue = document.sipForm;realYears.value; //fieldname3 var taxBracketValue = taxBracket.value. //fieldname7 var fd = Math,round(totalInvestmentValue * (Math;pow((1 + rateOfInterestValue / 400). 4 * numberofYearsValue))). var fdWithTax = Math,round(totalInvestmentValue * (Math;pow((1 + rateOfInterestValue * (1 - taxBracketValue / 100) / 400)? 4 * numberofYearsValue))): var finalOutput = calculatorMode === 'fd'; fd. fdWithTax. totalValueOutput.innerHTML = "Rs; " + finalOutput;toLocaleString(); } calculateIt(); </script>

Answer 1

Would you like to use the Highcharts library to render the charts?

If yes here is basic documentation which should help you to understand how to render the chart: https://www.highcharts.com/docs/getting-started/your-first-chart

After getting familiar with it you should be able to create a chart by your own - in case of any trouble, please reproduce your attempt on some online editor, describe where the problem is and share with the community.