Untitled

HTML----------------
<html>
  <head>

  <title>Temperature - Humidity</title>

  %%PLUGIN_CSS%%
  %%PLUGIN_JAVASCRIPT%%

  </head>

  <body>
    <div id="container">

      <div id="inner">
        <span id="gauge_t"></span>
        <span id="gauge_h"></span>
      </div>
     </div>
  </body>
</html>

CSS----------------
  <style type="text/css">
  body { background-color: #ffffff; }
  #container { height: 100%; width: 100%; display: table; }
  #inner { vertical-align: middle; display: table-cell; }
  #gauge_t { padding-left:70px; margin: 0; float:left; }
  #gauge_h { margin: 0; float:left; }
    //#gauge_at { margin: 0; float:left; }
</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'></script>
<script type='text/javascript'>

  // set your channel id here
  var channel_id = 38265;
  // set your channel's read api key here if necessary
  var api_key = '';
  // maximum value for the gauge
    var max_gauge_value = 100;
  // name of the gauges
  var gauge_t = 'Temp(*C)';
  var gauge_h = 'Humid(%)';

  // global variables
  var chart_t,chart_h, charts, data;

  // load the google gauge visualization
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(initChart);

  // display the data
  function displayData(point,cht) {
    if(cht==1) {
       data.setValue(0, 0, gauge_t);
       data.setValue(0, 1, point);
       chart_t.draw(data, options_t);
    }
    else if(cht==2) {
       data.setValue(0, 0, gauge_h);
       data.setValue(0, 1, point);
       chart_h.draw(data, options_h);
    }
  }

  // load the data
  function loadData() {
    // variable for the data point
    var p_t,p_h;

    // get the data from thingspeak
    $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

      // get the data point
      p_t = data.field2;
      p_h = data.field3;

      // if there is a data point display it
      if (p_t) {
        displayData(p_t,1);
      }
      if (p_h) {
        displayData(p_h,2);
      }

    });
  }

  // initialize the chart
  function initChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(1);

    chart_t = new google.visualization.Gauge(document.getElementById('gauge_t'));
    chart_h = new google.visualization.Gauge(document.getElementById('gauge_h'));
    options_t = {animation:{duration: 4000, easing: 'out',}, width: 160, height: 160, greenFrom: 18, greenTo: 26, yellowFrom: 26, yellowTo: 35, redFrom: 35, redTo: 60, minorTicks: 15, max: 60, min: -15};
    options_h = {width: 125, height: 125, greenFrom: 35, greenTo: 60, yellowFrom: 60, yellowTo: 75, redFrom: 75, redTo: 100, minorTicks: 10, max: 100, min: 0};

    loadData();

    // load new data every 15 seconds
    setInterval('loadData()', 15000);
  }

</script>