An Example of a Google Bar Chart

by tokkonoPapa

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="chart_div"></div>

CSS

svg a.city-name > text {
  fill: #0073aa;
  text-decoration: underline;
}

svg a.city-name:hover > text {
  fill: #0096dd;
}

JavaScript

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawBasic);

/* find the value in array */
function inArray(val, arr) {
  var i, n = arr.length;
  val = val.replace('…', ''); // remove ellipsis

  for (i = 0; i < n; ++i) {
    if (i in arr && 0 === arr[i].label.indexOf(val)) {
      return i;
    }
  }

  return -1;
}

/* add a link to each label */
function addLink(data, id) {
  var n, p, info = [],
    ns = 'http://www.w3.org/1999/xlink';

  // make an array for label and link.
  info = [];
  n = data.getNumberOfRows();
  for (i = 0; i < n; ++i) {
    info.push({
      label: data.getValue(i, 0),
      link: data.getValue(i, 2)
    });
  }

  $('#' + id).find('text').each(function(i, elm) {
    p = elm.parentNode;
    if ('g' === p.tagName.toLowerCase()) {
      i = inArray(elm.textContent, info);
      if (-1 !== i) {
        /* wrap text tag with anchor tag */
        n = document.createElementNS('http://www.w3.org/2000/svg', 'a');
        n.setAttributeNS(ns, 'xlink:href', info[i].link);
        n.setAttributeNS(ns, 'title', info[i].label);
        n.setAttribute('target', '_blank');
        n.setAttribute('class', 'city-name');
        n.appendChild(p.removeChild(elm));
        p.appendChild(n);
        info.splice(i, 1); // for speeding up
      }
    }
  });
}

function drawBasic() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', {
      role: 'link'
    }],
    ['New York City, NY', 8175000, 'http://google.com/'],
    ['Los Angeles, CA', 3792000, 'http://yahoo.com/'],
    ['Chicago, IL', 2695000, 'http://bing.com/'],
    ['Houston, TX', 2099000, 'http://example.com'],
    ['Philadelphia, PA', 1526000, 'http://example.com']
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {
      width: '50%'
    },
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart =...