Hi,
I've added the HTML tooltip and the Sankey chart displays nicely.
The problem I have is that the tool tip is showing the weight of the lines
(not needed, as they are all the same weight), and the text I provided is
the same for all lines.
My rows look like this:
['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>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/6a04bdad-4000-4a54-93e2-abab20c71f27n%40googlegroups.com.
