JSFiddle - React, Tailwind, and code Playground

by Kevin Bratt

HTML

<body>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="a">X</div>
  <div id="b">-</div>
  <div id="c">-</div>
  <div id="chart_div" style="width: 400px; height: 120px;"></div>
  <button class="button" id="butt1" disabled>Temp</button>
  <button class="button" id="butt2" disabled>CPU</button>
</body>

CSS

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

JavaScript

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

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Temp', 0],
    ['CPU', 0]
  ]);

  var options = {
    width: 400,
    height: 120,
    blueFrom: 20,
    blueTo: 25,
    greenFrom: 0,
    greenTo: 5,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 50,
    yellowTo: 85,
    minorTicks: 5
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

  chart.draw(data, options);

  var buttons = [document.getElementById("butt1"), document.getElementById("butt2")];

  buttons.forEach(function(element, index) {
    element.onclick = (function() {
      data.setValue(index, 1, 40 + Math.round(60 * fun()));
      chart.draw(data, options);
    });
    element.disabled = false;
  })
}

function fun() {
  collectData();
  return Math.random();
}

function collectData() {

  var gei_a = document.getElementById("a");
  var gei_b = document.getElementById("b");
  var gei_c = document.getElementById("c");

  var xhr = new XMLHttpRequest();

  gei_a.innerHTML = xhr.readyState.toString();
  gei_b.innerHTML = "?";

  xhr.open("GET", 'http://localhost:10080/nitro/v1/stat/', false);
  xhr.setRequestHeader('X-NITRO-PASS', 'nsroot');
  xhr.setRequestHeader('X-NITRO-USER', 'nsroot');
  xhr.addEventListener("loadstart", xhrloadstart);
  xhr.addEventListener("progress", xhrprogress);
  xhr.addEventListener("abort", xhrabort);
  xhr.addEventListener("error", xhrerror);
  xhr.addEventListener("load", xhrload);
  xhr.addEventListener("timeout", xhrtimeout);
  xhr.addEventListener("loadend", xhrloadend);
  xhr.onreadystatechange = function() {
    gei_c.innerHTML = "we got here!";
    gei_a.innerHTML = xhr.readyState.toString();
    gei_b.innerHTML = xhr.responseText;

  }
  xhr.send();
}



xhrloadstart() {
  document.getElementById("c").innerHTML = "loadstart";
}
xhrprogress() {
 ...