ToolTip Example messed
by rbyce
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
</script>
<body>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<div id="HTML_tooltip" style="position: relative;
left: 30px;" ></div>
</body>
</html>
JavaScript
google.load("visualization", "1.1", {
packages: ["sankey"]
});
google.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', 'Revenues');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
['Fred', 'Ann', 107.91, "timper"],
['Bill', 'Ann', 47.86, "timper"],
['Carol', 'Ann', 817.9, "timper"]
]
//.map(function(d) {
//d.push(formatter.formatValue(d[2])+ ' This is an HTML tooltip<br>It needs to be formatted nicely<br>in a rectangular box that is not <i>long and thin</i>');
// d.push(formatter.formatValue(d[2])+ ' <br> This is an HTML tooltip.');
// return d;
//})
);;
// Set chart options
var options = {
width: 500,
height: 300,
tooltip: {isHtml: true},
formatNumber: '$### m',
sankey: {
iterations: 64,
node: {
nodePadding: 30,
interactivity: true,
label: {
fontName: 'Times-Roman',
fontSize: 16,
color: '#871b47',
bold: false,
italic: true
}
},
link: {
pattern: '$###.##'
},
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);
}