HTML Editor
<!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>
OUTPUT
×

Save as Private