Geek asks and answers

Place an image inside a cell in a Google visualization table

I am experimenting with a table and sample code for a Google visualization table.

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

However, I need to be able to use images (via URL) inside the cells. It seems that the function AddColumnonly supports string, number, boolean, date, datetimeand timeofdaytypes in the datatable documentation .

Is there a way around this or something that I am missing to insert a web image into some cells?

+3
source share
2 answers

"", HTML <img>. allowHtml true.

+7

:

1.how "Image" "string",

2. "img" javascript, src,

. 3. allowHtml 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>
+1

More articles:


All Articles