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?
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With