how to add attach hyperlinks to google chart

830 views
Skip to first unread message

nisha

unread,
Aug 19, 2019, 2:59:55 AM8/19/19
to Google Visualization API
how to add attach hyperlinks to google chart 

Ray Thomas

unread,
Aug 19, 2019, 10:55:17 PM8/19/19
to Google Visualization API
Here's how I do it, I'm not sure if it is the most efficient method, but it works in at least Table Charts.

I create a column that contains the text I want to show and another that contains the URL i want the text to link to. You can see that in https://docs.google.com/spreadsheets/d/1kjOTQMAlWc-j6G_XfFUJIzAxuvmyxygQh0q1Dpn4oRU/ where the Name column is the text I want to add the URL to.

Once I've got the datatable, I get the number of rows in it, then step through each row, combining the Name and URL to make the link

var totalRows = crewDataTable.getNumberOfRows(); 
for (i = 0; i < totalRows; i++) {
// Create the link in the name column (index 0)
var txt = crewDataTable.getValue(i, 4);
if (txt !=null) {
name = crewDataTable.getValue(i, 0);
newURL = '<a href="'+txt+'">'+name+'</a>';
crewDataTable.setCell(i, 0, undefined, newURL); 

You can see the finished table at http://hmsgambia.org/crewlist.htm 

I used the same technique on http://hmsgambia.org/crewbios.htm but that only collects data where the URL column is not empty (null). There's nothing much else on those pages so looking at the source should show you the code fairly easily.

There's another technique you can use and that's adding the URL to the tooltips for most charts. You can add almost any HTML to the tooltips and the documentation for doing that is at https://developers.google.com/chart/interactive/docs/customizing_tooltip_content 

I used the documentation to add images to the tootips to a Timeline chart, but there's no reason you cannot add links. A working example of that is at https://indstate.edu/business/history/faculty (that's a fairly long page so just use  Ctrl + End to get to the bottom of it). The sheet for that is at https://docs.google.com/spreadsheets/d/1MFDuFhqJGkEBSgbZd5t4KBcz06LPrRVVRykIom2LZzs/ - it looks a bit odd because the top timeline on that page is drawn using Timeline JS and that expects the data to be in a certain order and I use a single sheet to produce both timelines.

Reply all
Reply to author
Forward
0 new messages