JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
      </script>
      <script type="text/javascript">
         google.charts.load('current', {packages: ['corechart']});     


      </script>
   </head>
   <body>
       <table style="width:40%" align="center" width="580px" height="80px">
      <tr>
        <th>Half-Life</th>
        <th>Dose (mg)</th>
        <th>Days Displayed</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>
         <td>
          <input class="display" type="number" id="disp" maxlength="4" value="3"><br> </td>
        
        <td>
      </tr>
        <tr>
    <td colspan="2">
        <input class="bttn" type="button" id="bttn" maxlength="4" value="Graph Elimination"><br>
          </td>
  </tr>
    </table>
<!---------------------------------------------------  ---------->
      <div id="container" style="width: 780px; height: 380px; margin: 0 auto"></div>
      <script language="JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
           var data = new google.visualization.DataTable();
    var plotData = [];
var hl = document.getElementById("half").value;
 var d = document.getElementById("amou").value;
  var dis = document.getElementById("disp").value;
  var hrDisp = dis*24;

  for (i = 0; i <= hrDisp; i += 1) {
    var point = d * Math.pow(0.5, (i / hl));
   // var point = pointInt.toFixed(2);
    plotData.push(point);
  }
  
  //plotData.unshift([0, 0]);
    //set 0,0 at beginning
console.table(plotData);
  
    var dateArr = [];
  for (i = 0; i <= plotData.length - 1; i++) {
    //var plot_date = new Date();   
    //cur_date.setHours(i);
    var fin_date = new Date();
   ...