JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<head>
  <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>
<form>
      <div class="form-group col">
        <label for="halfLifeIn">Half-Life</label>
        <input type="number" class="form-control" id="halfLife" value="12">
      </div>
      <div class="form-group col">
        <label for="amountIn">Dose Amount</label>
        <input type="number" class="form-control" id="amount" value="5">
      </div>
      </form>
  <div class="form row">
    <div class="form-group col">
    </div>
        <div class="form-group col">
        <input class="form-control" type="button" value="Graph" id="sendbutton">
        </div>
      </div>
  <div class="calculator" style="padding-top:20px;">
    <div class="container">
      <form>
      
      </form>
    </div>
  </div>
</body>


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





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>

JavaScript

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

function drawChart() {


  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]);



  data.addColumn('number', 'Hour');
  data.addColumn('number', 'Pageviews');

  /*  for (i = 0; i < chartData.length; i++){
        data.addRow(chartData[i]);
    };*/
  data.addRows(plotData);
  //data.addRows([chartData[2]]);
  var options = {
    width: 600,
    height: 250
  };

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

  chart.draw(data, options);
}