place an image inside a Google Visualization Table cell

Question

I am experimenting with the table and example code for Google's Visualization Table.

https://google-developers.appspot.com/chart/interactive/docs/gallery/table

However, I need to be able to using images (via URL) inside the cells. It seems the AddColumn function only supports string, number, boolean, date, datetime, and timeofday types per the datatable documentation.

Is there a way around this or something I'm missing to be able to insert a web image into some cells?

Answer 1

You have to use a "string" type column that contains the HTML to create the <img> tags. Then in the Table's options, you need to set the allowHtml option to true.

Answer 2

The following code explains:

1.how "Image" has to be passed with type "string",

2.how "img" tag can be included in javascript and image can be passed as src,

3.how to make allowHtml attribute true.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>

    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      
      google.load('visualization', '1', {packages:['table']});
      google.charts.setOnLoadCallback(imgInTable);

  function imgInTable()
  {
   var data = new google.visualization.DataTable();
  
   data.addColumn('string', 'Politician');
   /*HTML Tag is enclosed in quotes. Therefore it has to be of string datatype*/
   data.addColumn('string', 'Criminal Cases');
   data.addRows([
    ['P1', "<img src='16.PNG'>"]
    ]);


   /*img_div is the id of the div element in the html code where you want to place the table*/
   var table = new google.visualization.Table(document.getElementById('img_div'));
   /*allowHtml: true is must for img tag to work*/
   table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
  }
</script>