Google Charts: Setting Sankey.node.label as HTML link

Question

I'm using the Sankey Chart from Google Charts and I've figured out to use html in the tooltip functionality, but I can't quite figure out how to adjust it so that other features of the graph can use html features as well.

Ideally I would want to set the Sankey.node.label element to be able to link to other pages on the site....

I've tried things like

  data.addColumn({'type':'string', 'role': 'From', 'p': {'html': true} });

and

   From: { isHtml:true }

but they didn't seem to work. Suggestions appreciated!

score 0 · Accepted Answer · edited May 23 '17 at 12:07

While I did manage to get this working somewhat using jQuery and Javascript, it never got the full functionality I desired and so I scrapped using the Sankey. But in case anyone is wondering how to set the sankey.node.label as an html link, this was my solution:

$(document).ready(function() {
setTimeout(function(){
// Selects SVG TAG and ADDS LINK FUNCTIONALITY
var svgtag = document.querySelector("#sankey_multiple > div > div:nth-child(1) > div > svg")
$(svgtag).attr("xmlns:xlink", "http://www.w3.org/1999/xlink")

var linkNode = document.querySelector("#sankey_multiple > div > div:nth-child(1) > div > svg > g:nth-child(3) > text:nth-child(1)")
$(linkNode).wrap( "<a xlink:href='examplelinkone.com'></a>" )

var linkNode = document.querySelector("#sankey_multiple > div > div:nth-child(1) > div > svg > g:nth-child(3) > text:nth-child(3)")
$(linkNode).wrap( "<a xlink:href='examplelinktwo.com'></a>" )

$("#sankey_multiple").html($("#sankey_multiple").html());

}, 500);
});

First we had to add the xlink to the SVG tag in order to make the text tag of svg function as a link. Afterwards we can wrap the linkNode in the svg with an xlink to the desired URL.

But, after this, we still had to reinstantiate the SVG drawing in order to make the links update on the page. The idea being to "refresh the whole svg" (as suggested here: jquery's append not working with svg element?):

    $("#svgid").html($("#svgid").html());

So at this point, I would call this 100ms after the page loaded so that the links would be in place by the time everything loaded. This worked fine, the links loaded and were followable.

But doing this "refresh" simply just rewrites the Sankey and overrides other things like the tooltip functionality. And this is where I decided that this just was getting unruly and decided to pursue a different tact.

Hope this might give someone else some ideas of how to work with this eventually though!

Google Charts: Setting Sankey.node.label as HTML link

1 Answers1