Add HTML Link to Google Charts Table
Question
I'm trying to add an HTML link to a Google Chart Table column. I have setHTML: true for both the column and the table, but its just showing the HTML code instead of interpreting it. Can someone point me in the right direction?
Thanks
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Logged In'],
['<a href="LINK">Item 1</a>', 'Item 2'],
]);
data.setColumnProperty(0, {allowHTML: true});
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {allowHTML: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="table"></div>
</body>
</html>
3 answers
solution1
13 ACCPTED 2013-01-15 17:40:09
The allowHTML property is case sensitive. It has to be {allowHtml: true}.
solution2
2 2015-03-31 14:05:51
You should use formatters .
If you replace value with HTML then sorting will not work properly.
solution3
1 2018-02-03 05:40:21
Between visualization = new google.visualization.Table... and visualization.draw(data, {allowHTML: true}) , add a new class, DataView to format column(s):
Example: Here, we hyperlink first column containing website name with URL given in the third column, and then hyperlink URL string itself in the third column. Index of columns are NOT the actual one in data.table but are relative to .format(data, [,]) which is specified after declaring variables to format columns 1 .
// hyperlink column containing website title
var format_name = new google.visualization.PatternFormat(
'<a href="{2}">{0}</a>');
// hyperlink URL column
var format_url = new google.visualization.PatternFormat(
'<a href="{0}">{0}</a>');
// apply formatters
// extract first three columns (or 0 and 2) for format_name variable
format_name.format(data, [0,1,2]);
// extract the third column for format_url variable
format_url.format(data, [2]);
// Use DataView to create read-only view for data.table
var view = new google.visualization.DataView(data);
// Use view instead of original data for data.table source
visualization.draw.draw(view, {allowHTML: true});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.