January 29, 2013

Google visualization api – html links in table cells

Filed under: Tips — Tags: , — Webopius @ 10:37 pm

Really simple tip but one of those things that can take a while to find.

Google Charts

Google’s (free!) visualization API is excellent (see link to the right) and provides developers with a range of different chart types to use within their applications. One item many people require is to include links within cells of Google Visualization tables to take them to a web page with more information on the item shown, for example:

table

Google’s default setting is to NOT permit this so you need to switch HTML support on by setting ‘allowHtml’ to true. Here’s a sample piece of code showing this in use:

<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ProductID');
  data.addColumn('number', 'VariantID');
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Email requests');
  data.addRows([
    [100,200,'<a href="link1.html">Description 1</a>',20],
    [101,201,'<a href="link2.html">Description 2</a>',19]			
  ]);

  var table = new google.visualization.Table(document.getElementById('table1_div'));
  table.draw(data, {showRowNumber: false, allowHtml: true});
}
</script>

<div class="table1_div">Table will go here</div>
  • Tags