Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

place an image inside a Google Visualization Table cell

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?

like image 638
ikathegreat Avatar asked Dec 25 '22 13:12

ikathegreat


2 Answers

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.

like image 175
asgallant Avatar answered Jan 27 '23 19:01

asgallant


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>
like image 40
Parag Jain Avatar answered Jan 27 '23 19:01

Parag Jain