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="4">
          </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">
          <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"...

JavaScript

function compoundingData() {
  var plotData = [];
  var pv = parseFloat($("#halfLife").val());
  console.log(pv);
  var r = parseFloat($("#doseAmount").val());
  console.log(r);
  var span = pv *6
 /* var span = (pv * 10)/24;
  var sp = 24 * (span.toFixed(0)); */

  for (i = 1; i <= span; i += 1) {
    var point = r * Math.pow(0.5, (i / pv));
    plotData.push([i, point]);
  }
  plotData.unshift([0.5, r])
    //set 0,0 at beginning
  var z = pv * 0;
  plotData.unshift([z, z]);

  console.table(plotData);
  return plotData;

}

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 = document.querySelector('input[type="button"]');
sendBtn.onclick = function(e) {
  google.charts.setOnLoadCallback(drawChart());
};

/*$("form").on("input", function(e) { google.charts.setOnLoadCallback(drawChart());
});*/