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?

score 9 · Accepted Answer · answered Feb 10 '14 at 16:10

9

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.

answered Feb 10 '14 at 16:10

asgallant

26,060
6
72
87

awesome, thanks. just for FYI, you must enclose the HTML with single quotes to get it work. It looks weird, but it is what seemed to work. – ikathegreat Feb 12 '14 at 14:42
1

It's not that you have to enclose it in single-quotes, it depends on the quotes you use internally in the HTML - you can either use single quotes outside and double quotes inside, or double outside and single inside, or you can escape the internal quotes. As an example, these are all valid: `''`, `""`, `""`. – asgallant Feb 12 '14 at 15:07

score 1 · Answer 2 · edited Aug 04 '16 at 01:06

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>

place an image inside a Google Visualization Table cell

2 Answers2