ToolTip Example with HTML attemps

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', 'p': {'html': true}});
   // data.addColumn({type: 'string', role: 'tooltip'});
    data.addRows([
        ['Fred', 'Ann', 107.91, "/b timper"],
        ['Bill', 'Ann', 47.86, ""],
        ['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'
           }
        }

    };
    
    // Read up on https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
//    var formatter = new google.visualization.NumberFormat({
//        prefix: '$',
//        pattern: '$###.## m'
//    });
//    formatter.format(data, 2);

    // Instantiate and draw our...