JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<head>
  <title>Continously Compounding Interst Plot</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
  <div class="calculator" style="padding-top:20px;">
    <div class="container">
      <form>

        <div class="form-group row">
          <label for="halfLifeInput" class="col-6 col-form-label">Present Value HALFLIFE:</label>
          <div class="col-4">
            <input class="form-control" type="text" id="halfLife" value="8">
          </div>
        </div>

        <div class="form-group  row">
          <label for="doseAmountInput" class="col-6 col-form-label">Interest Rate DOSE AMOUNT:</label>
          <div class="col-4">
            <input class="form-control" type="text" id="doseAmount" value="10">
          </div>
        </div>

        <div class="form-group  row">
          <label for="freqDoseInput" class="col-6 col-form-label">Frequency of Dose:</label>
          <div class="col-4">
            <input class="form-control" type="text" id="freqDose" value="4">
          </div>
        </div>

        <div class="form-group  row">
          <div class="col-4">
            <input class="form-control" type="button" value="Graph" id="sendbutton">
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="chart">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-lg-12">
          <div id="compounding_chart" style="width: 900px; height: 500px"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<footer>

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <!-- jQuery first, then Tether, then Bootstrap JS, then Google Charts, then my own JS file. -->
  <script...

JavaScript

function compoundingData() {

  var plot_data = [];
  var arr_i = [];
  var arr_k = [];

  var hl = parseFloat($("#halfLife").val());
  console.log(hl);
  var d = parseFloat($("#doseAmount").val());
  console.log(d);
  var fr = parseFloat($("#freqDose").val());
  console.log(fr);

  var span = 6;
  arr_k.length = span;
  arr_k.fill(0);
  var inner = [];
  for (k = 0; k <= span; k += 1) {
    arr_k[k] = [];
    for (i = 0; i <= fr; i += 1) {
      var in_point = Math.pow(0.5, (i / hl));
      var func2 = function(k, i) {
        return (k == 0 && i == 0) ? d : (k > 0 && i == 0) ? arr_k[k - 1][fr] + d : (i > 0) ? arr_k[k][0] * in_point : 0
      }
      arr_k[k][i] = func2(k, i);
    }
  }



  console.table(arr_k);
  var flattened = arr_k.reduce(
    (acc, cur) => acc.concat(cur), []
  );


  for (i = 0; i <= flattened.length; i += 1) {
    var point = flattened[i];
    plot_data.push([i, point]);
  }


  console.log(plot_data);
  return plot_data;

}

google.charts.load("current", {
  packages: ["corechart", "line"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn("number", "Hours");
  data.addColumn("number", "Amount");
  data.addRows(compoundingData());

  var options = {
    animation: {
      startup: true,
      /* Need to add this for animations */
      duration: 1000,
      easing: 'out',
    },
    hAxis: {
      title: "Hours",
      //ticks: [24, 48, 72],
      viewWindowMode: "explicit",
    },
    vAxis: {
      title: "Amount",
      //baseline: ("#doseAmount").val()
    },
    //curveType: "function",
    legend: {
      position: "none"
    },
    chartArea: {
      top: 5
    },
    explorer: {
      actions: ['dragToPan', 'rightClickToReset'],
      axis: "horizontal",
      //keepInBounds: true,
    }
  };
  var chart = new google.visualization.AreaChart(
    document.getElementById("compounding_chart")
  );
  chart.draw(data, options);
}

var sendBtn =...