How to add a title and text below a Google Gauge Chart?

[Lucas Luther]

I need to add a title and Text below each gauge on my page? How do I add this to the code? I have tried several approaches. Code is below.

 

<style type='text/css'>
 .chart-container {
  width: 315px;
  margin: 0 auto;
 }
 
 .chart {
  float: left;
  margin-right: 15px;
  border-spacing: 30px;
  cursor: pointer;
 }
</style>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
 google.load('visualization', '1', {packages:['gauge']});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
  var chartAcres = new google.visualization.Gauge(document.getElementById('chart-div-acres')),
   chartHpt = new google.visualization.Gauge(document.getElementById('chart-div-hpt')),
   options = {
   width: 400, height: 145,
   redFrom: 25, redTo: 50,
   yellowFrom:50, yellowTo: 70,
   greenFrom:70, greenTo: 100,
   min: 0, max: 100,
   minorTicks: 5
  };

  chartAcres.draw(google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['Acres', 100.47]
  ]), options);

  chartHpt.draw(google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['HPT', 128.32]
  ]), options);
  
  setChartClickable('#chart-div-acres', 'http://as.tva.gov/public/pnr/SiteAssets/Land%20Conditions.pdf');
  setChartClickable('#chart-div-hpt', 'http://as.tva.gov/public/pnr/SiteAssets/Land%20Conditions.pdf');
 }
 
 function setChartClickable(divSelector, url) {
  $(divSelector).find('iframe').each(function() {
   var iframeBody = $(this).contents().find('body');
   
   iframeBody.click(function() {
    window.open(url);
   });
   iframeBody.css('cursor', 'pointer');
  });
 }
</script>
 
<div class="chart-container" >
 <div id='chart-div-acres' class='chart'></div>
 <div id='chart-div-hpt' class='chart'></div>
 <br style="clear: both;" />
</div>

[asgallant]

The Gauges are put inside <td> elements inside a <table>  in the chart div; you can append your title and text to the <td> elements.

As a side note, your click code won't work in modern browsers, as only IE 8 and older use iframes for the charts.