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="form-control" type="button" value="Graph" id="sendbutton">                 </div>
    </div>
    </div>
    <div class="form-group  row">
          <div class="col-3">
            <input class="form-control" type="button" value="Graph" id="sendbutton">
          </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"...

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 data = new google.visualization.DataTable();
  var plotData = [];

  for (i = 1; i <= 60; i += 1) {
    var point = d * Math.pow(0.5, (i / hl));
    plotData.push([i, point]);
  }
  plotData.unshift([0.5, 10])
  //set 0,0 at beginning
  var z = 10 * 0;
  plotData.unshift([z, z]);
  
  // console.log(flattened);
  console.log(plotData);
  // var finArr = [dateArr, plot_data];
  //onsole.log(finArr);
  return plotData;


}

google.load('visualization', '1.1', {
  packages: ['line']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
data.addColumn("number", "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);
}


var sendBtn = document.querySelector('input[type="button"]');
sendBtn.onclick = function(e) {
  google.charts.setOnLoadCallback(drawChart());
};