JSFiddle - React, Tailwind, and code Playground

An example of a Google Timeline using the date data type.

by Sub Taper

HTML

<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>

        <div class="form-group row">
          <label for="halfLifeInput" class="col-6 col-form-label">Present Value HALFLIFE:</label>
          <div class="col-4">
            <input class="form-control" type="text" id="halfLife" value="4">
          </div>
        </div>

        <div class="form-group  row">
          <label for="doseAmountInput" class="col-6 col-form-label">Interest Rate DOSE AMOUNT:</label>
          <div class="col-4">
            <input class="form-control" type="text" id="doseAmount" value="10">
          </div>
        </div>

        <div class="form-group  row">
          <label for="freqDoseInput" class="col-6 col-form-label">Frequency of Dose:</label>
          <div class="col-4">
            <input class="form-control" type="text" id="freqDose" value="6">
          </div>
        </div>

        <div class="form-group  row">
          <div class="col-4">
            <input class="form-control" type="button" value="Graph" id="sendbutton">
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="chart">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-lg-12">
          <div id="compounding_chart" style="width: 900px; height: 500px"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<footer>

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <!-- jQuery first, then Tether, then Bootstrap JS, then Google Charts, then my own JS file. -->
  <script...

JavaScript

function compoundingData() {

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

  var hl = parseFloat($("#halfLife").val());
  console.log(hl);
  var d = parseFloat($("#doseAmount").val());
  console.log(d);
  var fr = parseFloat($("#freqDose").val());
  console.log(fr);
  
  var span = 6;
  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
       :              99
}
    arr_k[k][i] = func2(k,i);
    //inner[i] = (in_point);
         //  var spl = arr_k.splice(k, 1, inner);
         //  arr_k[k][0] = inner[inner.length-1];

    }

    //var newArray = [];
//console.table(arr_k);

}
  //plotData.unshift([0.5, d])
    //set 0,0 at beginning
  //var z = hl * 0;
 // plotData.unshift([z, z]);

   
  console.table(arr_k);
  var flattened =arr_k.reduce(
  ( acc, cur ) => acc.concat(cur),
  []
);


for (i = 0; i <= flattened.length; i += 1) {
    var point = flattened[i];
    plot_data.push([i, point]);
  }
/*	var index_arr = (flattened.length);
for(var x = 0; x < index_arr.length; x++) {
    index_arr.push([x]);   } */

console.log(plot_data);
  return plot_data;

}    
     
     
     
     google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
       data.addColumn("number", "Hours");
  data.addColumn("number", "Amount");
  data.addRows(compoundingData());

      var options = {
        width: 900,
        height: 500,
        legend: {position: 'none'},
        enableInteractivity: false,
        chartArea: {
          width: '85%'
        },
        hAxis: {
          viewWindow: {
            min: new Date(2014, 11, 31, 18),
            max: new Date(2015,...