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">
    Here is a simple page.
  </div>
  <div id="b">
    Here is a simple page.
  </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 xhr = new XMLHttpRequest();
  gei_a.innerHTML = xhr.readyState.toString();
  gei_b.innerHTML = "?";

  xhr.open("GET", '/echo/js/?js=hello%20world!', true);
  xhr.onreadystatechange = function() {
    gei_a.innerHTML = xhr.readyState.toString();
    gei_b.innerHTML = xhr.responseText;
  }
  xhr.send();
}

//(e) => {
//    document.getElementById("mode").innerHTML = "http.readystate.toString()";
//    document.getElementById("mode").innerHTML = http.readystate.toString();
//  }
// }