Google API - Org Chart Example

https://developers.google.com/chart/interactive/docs/gallery/orgchart

by katalin_2003

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JavaScript

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: 'Mike',
              f: 'Mike<div style="color:red; font-style:italic">President</div>'
            },
            '', 'The President'
          ],
          [{
              v: 'Jim',
              f: 'Jim<div style="color:red; font-style:italic">Vice President</div>'
            },
            'Mike', 'VP'
          ],
          ['Alice', 'Mike', 'Manager'],
          ['Bob', 'Jim', ''],
          ['Carol', 'Bob', ''],
          ['Mike ma', 'Mike', ''],
          ['Mata', 'Bob', ''],
          ['Lol', 'Bob', ''],
          ['Yolo', 'Lol', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {
          allowHtml: true,
          allowCollapse: true,
          // nodeClass: 'csa',
          // selectedNodeClass: 'selected-csa',
          size: 'medium' // small, medium, large
        });
      }