How to print the bottom label of google gauge outside the guage?

I am trying to print the bottom label of the Google gauges outside(just below the respective gauges). Also, I want to provide two different suffixes for the two gauges. I have tried giving separate formatters(formatter1, formatter2) for both and separate data(data1 and data2), but it's not even drawing the gauges(no error). In this case, the draw_data_guage will have a fourth argument.

var e = document.getElementById('draw_chart');
e.onclick = draw_data_gauge(80, 68, '%');

function draw_data_gauge(cpu_data, memory_data, suffix) {
  console.log("in guage")
  google.charts.load('current', {
    'packages': ['gauge']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['CPU', cpu_data],
      ['Memory', memory_data],
    ]);
    var options = {
      width: 500,
      height: 150,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 5,
    };
    var formatter1 = new google.visualization.NumberFormat({
      suffix: suffix,
    });
    formatter1.format(data1, 1);
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

    chart.draw(data1, options);
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>

<input name="Button" type="button" value="Draw" id="draw_chart" />

<div id="chart_div"></div>

I want the gauge's bottom label to be displayed outside and be able to give separate suffixes for both the gauges. Consider this jsfiddle link. I want to display the percentages(bottom label) outside the gauges just below them. My jsfiddle link is here. Thanks in advance.

Solution

Your direction to separate the graphs is right. Here is how to do this:

div {
  display: inline-block;
}

<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 options = {
      width: 400,
      height: 120,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 5
    };

    var source = [{
        data: ['Memory', 80],
        suffix: '%'
      },
      {
        data: ['CPU', 55],
        suffix: '?'
      },
      {
        data: ['Network', 68],
        suffix: '$'
      },
    ];

    source.map((item, index) => {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        item.data
      ]);

      var formatter = new google.visualization.NumberFormat({
        suffix: item.suffix,
        fractionDigits: 0
      });
      formatter.format(data, 1);

      document.body.innerHTML += '<div id="chart_div_' + index + '"></div>';
      var chart = new google.visualization.Gauge(document.getElementById('chart_div_' + index));
      chart.draw(data, options);
    });


    // dynamic update, randomly assign new values and redraw
    //setInterval(function() {
    //  data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
    //  formatter.format(data, 1);
    //  chart.draw(data, options);
    //}, 1000);
    //
    //setInterval(function() {
    //  data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
    //  chart.draw(data, options);
    //}, 1000);
    //
    //setInterval(function() {
    //  data.setValue(2, 1, 40 + Math.round(60 * Math.random()));
    //  chart.draw(data, options);
    //}, 1000);
  }
</script>

About the text position, I think that it's impossible. You can add a div below each chart with the text.