JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<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 class="form-inline">
  
    <div class="form-group">
                  <div class="form-group  row">
      <button class="btn btn-default">Half-Life</button>
      <input type="number" class="col-2" id="halfLife" value="12">
      <button class="btn btn-default">Dose</button>
      <input type="number" class="col-2" id="amount" value="5">
      <div class="col-2">
                 <input class="button" type="button" value="Graph" id="btn">
                 </div>
    </div>
    </div>
    </form>
    </div>
    </div>
   
</body>


<div id="todays-total-sales"></div>



<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" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script type="text/javascript"...

JavaScript

var aa = [];
function drawData() {

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

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

  var span = 10;
  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.load('visualization', '1.1', {
  packages: ['line']
});
google.setOnLoadCallback(drawChart);

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

  var options = {
    width: 600,
    height: 250
  };

  var chart = new google.charts.Line(document.getElementById('todays-total-sales'));

  chart.draw(data, options);
}