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>

        <!---------------HALF-LIFE---------------->
        <div class="form-group row">
          <label for="halfLifeInput" class="col-4 col-form-label">Half-Life Value (Hours):</label>
          <div class="col-3">
            <input class="form-control" type="number" id="halfLife" value="18">
          </div>
        </div>

        <!--------------DOSE AMOUNT--------------->
        <div class="form-group  row">
          <label for="doseAmountInput" class="col-4 col-form-label">Dose Amount (mg):</label>
          <div class="col-3">
            <input class="form-control" type="number" id="doseAmount" value="10">
          </div>
        </div>
        <!--------------FREQUENCY----------------->
        <div class="form-group  row">
          <label for="freqDoseInput" class="col-4 col-form-label">Frequency of Dose:</label>
          <div class="col-3">
            <select class="form-control" type="number" id="freqDose">
              <option value="4">Every 4 Hours</option>
              <option value="6">Every 6 Hours</option>
              <option value="8">Every 8 Hours</option>
              <option value="12" selected>Every 12 Hours</option>
              <option value="24">Every 24 Hours</option>
              <option value="48">Every 48 Hours</option>
            </select>
          </div>
        </div>
        <!--------------GRAPH BUTTON------------------>
        <div class="form-group  row">
          <div class="col-3">
            <input...

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 = (1 / (24 / fr)) * 20;
  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), []
  );

  //var cur_date = new Date();    
  var dateArr = [];
  for (i = 0; i <= flattened.length - 1; i++) {
    //var plot_date = new Date();   
    //cur_date.setHours(i);
    var fin_date = new Date();
    fin_date.setHours(i);
    var point = flattened[i];
    dateArr.push([fin_date, point]);
  }


  // console.log(flattened);
  console.log(dateArr);
  // var finArr = [dateArr, plot_data];
  //onsole.log(finArr);
  return dateArr;

}

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

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

  var options = {
  	        curveType: 'function',
           // displayAnnotations: true,
    hAxis: {
      title: "Hours",
      viewWindow: {
        min: 0,
        max: 12
      },
      gridlines: {
        count: 4
      },
      //ticks: [24, 48, 72],
      //viewWindowMode: "explicit",
    },
    vAxis: {
      title: "Amount",
      legend: {
        position: "none"
      },
      chartArea: {
       ...