JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>

  <title>Google Gauge - ThingSpeak</title>

  %%PLUGIN_CSS%%
  %%PLUGIN_JAVASCRIPT%%

  </head>

  <body>
    <div id="container">
      <div id="inner">
        <div id="timeline"></div>
      </div>
    </div>
  </body>
</html>

CSS

<style type="text/css">
  text { fill: #888 ; }
  body { background-color: #333; }
  #container { width: 100%; display: table; }
  #inner { display: table-cell; vertical-align: middle; }
  #timeline { width: 100%; margin: 0 auto; }
</style>

JavaScript

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<script type='text/javascript'>


  // set your channel id here
  var channel_id = 45244;
  // set your channel's read api key here if necessary
  var api_key = 'YOUR_KEY';
  // maximum value for the gauge
  var max_gauge_value = .1;
  // name of the gauge
  var gauge_name = 'A/C';
  
  var days = 7;
  
  var container, chart, data, options;

  google.setOnLoadCallback(initChart);

  function initChart(){
    container = document.getElementById('timeline');
    chart = new google.visualization.Timeline(container);
    data = new google.visualization.DataTable();
    data.addColumn({type: 'string', id: 'Type' });
    data.addColumn({type: 'string', id: 'label' });
    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
    data.addColumn({type: 'date', id: 'Begin' });
    data.addColumn({type: 'date', id: 'End' });
    options = {
      tooltip: {isHtml: true}
    };
    setTimeout('loadData()', 1000);
  }
  
  function loadData() {
    if (data.getNumberOfRows() > 0) {
      data.removeRows(0,data.getNumberOfRows());
    }
    // get the data from thingspeak
    jQuery.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feeds.json?days=' + days + '&api_key=' + api_key, function(json) {

      // get the data point
         if (json.feeds) {
            var f1 = 0, f2 = 0, f3 = 0, f4 = 0;
            var field, oldField, f1Beg, f2Beg, f3Beg, f4Beg;
            for (key in json.feeds) {
              oldField = field;
              field = json.feeds[key];
              if (field.field1 > 0 && f1 == 0) {
                f1 = 1;
                f1Beg = new Date(field.created_at);
                f1Beg = new Date(f1Beg.getTime() - field.field1*60000);
             ...