JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<html>

  <head>
    <style>
      table,
      th,
      td,
      input {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 5px;
        text-align: center;
        font-size: 16px;
      }

    </style>
  </head>
  <body>
    <table style="width:50%" align="center" width="580px" height="80px">
      <tr>
        <th>Half-Life</th>
        <th>Dose (mg)</th>
      </tr>
      <tr>
        <td>
          <input class="halflife" type="number" id="half" maxlength="4" value="12"><br> </td>
        <td>
          <input class="amount" type="number" id="amou" maxlength="4" value="20"><br>
        </td>
      </tr>
    </table>

  </body>

</html>
<br>
<br>
<br>
<div id="todays-total-sales" align="center"></div>

JavaScript

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

function drawChart() {

    var data = new google.visualization.DataTable();
    var plotData = [];
var hl = document.getElementById("half").value;
 var d = document.getElementById("amou").value;
  for (i = 0; i <= 60; i += 1) {
    var point = d * Math.pow(0.5, (i / hl));
    plotData.push([i, point]);
  }
  plotData.unshift([0, 0]);
    //set 0,0 at beginning
console.table(plotData);
    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: 580,
        height: 320,
    };

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

    chart.draw(data, options);
}