<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="point">
</div>
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Larry Page', f:'Larry Page<div style="color:red;">President</div>'},
'', 'The President'],
[{v:'Sundar Pichai', f:'Sundar Pichai<div style="color:red;">Vice President</div>'},
'Larry Page', 'VP'],
['Alex', 'Larry Page', ''],
['Blake', 'Sundar Pichai', 'Bob Sponge'],
['Charlie', 'Blake', '']
]);
var options = {
allowHtml:true,
height:400
}
var chart = new google.visualization.OrgChart(document.getElementById('point'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, options);
}
</script> </body>
</html>