Complex Sankey with an individual tooltip for each item
Daniel Hinostroza
['L1 Fred', 'L2 Ann', 50],
['L1 Bill', 'L2 Ann', 50],
['L1 Carol', 'L2 Ann', 50],
['L1 Jim', 'L3 Kevin', 50],
['L2 Ann', 'L3 Kevin', 50],
['L1 Sally', 'L3 Kevin', 50],
['L3 Kevin', 'L4 Daniel', 50]
I would like to modify the code to display a TEXT tooltip (as the tooltip will be populated from multiple fields in a database:
['L1 Fred', 'L2 Ann', 'L1-L2 ID 12345', 50],
['L1 Bill', 'L2 Ann', 'L1-L2 ID 11222', 50],
['L1 Carol', 'L2 Ann', 'L1-L2 ID 34566', 50],
['L1 Jim', 'L3 Kevin', 'L1-L3 ID 45383', 50],
['L2 Ann', 'L3 Kevin', 'L2-L3 ID 76154', 50],
['L1 Sally', 'L3 Kevin', 'L1-L3 ID 88345', 50],
['L3 Kevin', 'L4 Daniel', 'L3-L4 ID 55345', 50]
The full code is displayed below:
<html>
<head>
<h1>Complex Sankey with Tooltip</h1>
<script type="text/javascript" src=" http://www.gstatic.com/charts/loader.js "></script>
<div id="sankey_multiple"></div>
<div id="HTML_tooltip" style="position: relative; left: 30px;" ></div>
</head>
<body>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
var formatter = new google.visualization.NumberFormat({pattern:''});// $###.## bn
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addColumn({type: 'string', role: 'tooltip'});
data.setColumnProperty(3, 'html', true);
data.addRows([
['L1 Fred', 'L2 Ann', 50],
['L1 Bill', 'L2 Ann', 50],
['L1 Carol', 'L2 Ann', 50],
['L1 Jim', 'L3 Kevin', 50],
['L2 Ann', 'L3 Kevin', 50],
['L1 Sally', 'L3 Kevin', 50],
['L3 Kevin', 'L4 Daniel', 50]
].map(function(d) {
d.push(formatter.formatValue(d[2])+ ' <b>Level & ID</b></br>');
return d;
}));;
// Set chart options
var options = {
width: 750,
height: 300,
tooltip: {isHtml: true},
// formatNumber: '$### m',
sankey: {
iterations: 64,
node: {
// pattern: '$### m',
nodePadding: 30,
interactivity: true,
label: {
fontName: 'Arial',
fontSize: 14,
color: '#175091',
bold: false,
italic: false
}
},
allowHtml: 'true',
tooltip: {
isHtml: 'true'
}
}
};
var formatter = new google.visualization.NumberFormat({
// prefix: '$',
// pattern: '$###.## m'
});
formatter.format(data, 2);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple', 'HTML_tooltip'));
chart.draw(data, options);
}
</script>
</body>
</html>
