JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="btn-select-1" type="button" value="Enter Dose Amount" />
<input id="btn-select-2" type="button" value="Enter Half-Life of Drug" />
<input id="btn-select-3" type="button" value="Enter Frequency of Admin" />
<input id="btn-select-4" type="button" value="4" />
<input id="btn-select-5" type="button" value="5" />
<div id="qi_chart"></div>

JavaScript

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var qi_chart = new google.visualization.ComboChart(document.getElementById('qi_chart'));

  var qi_data = google.visualization.arrayToDataTable([
    ['Day', 'PPM'],
    ['5', 30], //How to connect this ?
    ['10', 25], //How to connect this ?
    ['15', 22], //How to conect this ?
    ['20', 19], //How to connect this ?
    ['25', 17], //How to connect this ?
  ]);

  var qi_options = {
    title: 'Internal PPM',
    width: 221,
    height: 265,
    pointSize: 3,
    lineWidth: 1,
    hAxis: {title: '', minValue: 0, maxValue: 40, textStyle: {fontSize:8}},
    vAxis: {title: '', minValue: 0, maxValue: 40, textStyle: {fontSize:8}, format: 'short'},
    backgroundColor: '#E4E4E4',
    legend: {position: 'none'}
  };

  for (var i = 0; i < qi_data.getNumberOfRows(); i++) {
    var button = document.getElementById('btn-select-' + (i + 1));
    button.addEventListener('click', getValue, false);
    button.name = i;
  }

  function getValue(sender) {
    var rowIndex = parseInt(sender.target.name);
    var value = qi_data.getValue(rowIndex, 1);
    var newValue = window.prompt('Enter the value:', value);
    sender.target.value = newValue;
    qi_data.setValue(rowIndex, 1, newValue);
    drawChart();
  }

  drawChart();
  function drawChart() {
    qi_chart.draw(qi_data, qi_options);
  }
});