2

I have this org chart which is too wide and shows up off screen, the user might think the page is blank, is there a way to make the chart appear at the center of the screen when it loads? Code as follows:

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/1/1e/Logo_gayosso_sin_fondo_en_alta.gif">
<title>Organigrama</title>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/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');

        // [{v:'IDENTIFICADOR', f:<a href="LINK">'PUESTO</a><div style="color:red; font-style:italic">NOMBRE</div>'}, 'A QUIÉN REPORTA', '']
        data.addRows([
          [{v:'CEO', f:'<a href="#">Director Nacional</a><div style="color:red; font-style:italic">Carlos Lukac</div>'}, '', ''],
          [{v:'DRH', f:'<a href="#"><a href="/FichasDescriptivas/DRH.html" >Director RH</a><div style="color:red; font-style:italic">Luis Arturo Flores</div>'}, 'CEO', ''],
          [{v:'DNCC', f:'<a href="#">Director Nacional de Capillas y Cementerios</a><div style="color:red; font-style:italic">Ursula Gartz</div>'}, 'CEO', ''],
          [{v:'DO', f:'<a href="#">Director Operaciones</a><div style="color:red; font-style:italic">Alejandro Sosa</div>'}, 'CEO', ''],
          [{v:'CFO', f:'<a href="#">CFO</a><div style="color:red; font-style:italic">Octavio Trejo</div>'}, 'CEO', 'CFO'],
          [{v:'DNVP', f:'<a href="#">Director Nacional Ventas de Previsión</a><div style="color:red; font-style:italic">Everardo García</div>'}, 'CEO', ''],
          [{v:'DRI', f:'<a href="#"><a href="#">Director de Relaciones Institucionales</a><div style="color:red; font-style:italic">Francisco Carriedo</div>'}, 'CEO', ''],
          [{v:'DPM', f:'<a href="#"><a href="#">Director Planeación y Marketing</a><div style="color:red; font-style:italic">Oscar Chávez</div>'}, 'CEO', ''],
          [{v:'GDO', f:'<a href="#"><a href="#">Gerente de Desarrollo Organizacional</a><div style="color:red; font-style:italic">Jeannette González</div>'}, 'DRH', ''],
          [{v:'GerenteVacante', f:'<a href="#">Gerente de Reclutamiento y Selección</a><div style="color:red; font-style:italic">Vacante</div>'}, 'DRH', ''],
          [{v:'HectorGarcia', f:'<a href="#">Gerente Administración de RH</a><div style="color:red; font-style:italic">Hector García Piñón</div>'}, 'DRH', ''],
          [{v:'BenjaminM', f:'<a href="#">Gerente de Relaciones Públicas</a><div style="color:red; font-style:italic">Benjamín Martínez</div>'}, 'DNCC', ''],
          [{v:'Gaudencia', f:'<a href="#">Gerente Servicios Complementarios</a><div style="color:red; font-style:italic">Gaudencia García</div>'}, 'DNCC', ''],
          [{v:'DRCVM', f:'<a href="#">Director Regional Capillas Valle de México</a><div style="color:red; font-style:italic">Víctor Hernández</div>'}, 'DNCC', ''],
          [{v:'DRCB', f:'<a href="#">Director Regional Capillas Bajío</a><div style="color:red; font-style:italic">Jesús Campos</div>'}, 'DNCC', ''],
          [{v:'DRCN', f:'<a href="#">Director Regional Capillas Norte</a><div style="color:red; font-style:italic">Sergio Nieto</div>'}, 'DNCC', ''],
          [{v:'GT', f:'<a href="#"><a href="#">Gerente Telemarketing</a><div style="color:red; font-style:italic">Fernando Moreno</div>'}, 'DNVP', ''],
          [{v:'GOC', f:'<a href="#"><a href="#">Gerente Operación Comercial</a><div style="color:red; font-style:italic">Ignacio Rosado</div>'}, 'DNVP', ''],
          [{v:'DRVM1', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 1</a><div style="color:red; font-style:italic">Marco Moreno</div>'}, 'DNVP', ''],
          [{v:'DRVM2', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 2</a><div style="color:red; font-style:italic">Juan Salvador Díaz</div>'}, 'DNVP', ''],
          [{v:'DRVPN', f:'<a href="#"><a href="#">Director Regional Ventas Valle Pacífico/Norte</a><div style="color:red; font-style:italic">Ricardo Lemus</div>'}, 'DNVP', ''],
          [{v:'DRVB', f:'<a href="#"><a href="#">Director Regional Ventas Bajío</a><div style="color:red; font-style:italic">Sinuhé Margarito</div>'}, 'DNVP', ''],
          [{v:'DRVM1', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 1</a><div style="color:red; font-style:italic">Marco Moreno</div>'}, 'DNVP', ''],
          [{v:'DITR', f:'<a href="#"><a href="#">Director Impuestos, Tesorería y Riesgos</a><div style="color:red; font-style:italic">Ramón Laguna</div>'}, 'CFO', ''],
          [{v:'DAI', f:'<a href="#"><a href="#">Director Auditoría Interna</a><div style="color:red; font-style:italic">Alfredo García</div>'}, 'CFO', ''],
          [{v:'DJ', f:'<a href="#"><a href="#">Director Jurídico</a><div style="color:red; font-style:italic">José Carrillo</div>'}, 'CFO', ''],
          [{v:'DPF', f:'<a href="#"><a href="#">Director Planeación FInanciera</a><div style="color:red; font-style:italic">Guillermo Perea</div>'}, 'CFO', ''],
          [{v:'DC', f:'<a href="#"><a href="#">Director Contraloría</a><div style="color:red; font-style:italic">Marco Vallejo</div>'}, 'CFO', ''],
          [{v:'DRTI', f:'<a href="#"><a href="#">Director de Tecnología de Informática</a><div style="color:red; font-style:italic">Isela Montenegro</div>'}, 'CFO', ''],
          [{v:'DA', f:'<a href="#"><a href="#">Director Administrativo</a><div style="color:red; font-style:italic">Gabriela Cruz</div>'}, 'CFO', ''],
          [{v:'DCZ', f:'<a href="#"><a href="#">Director Cobranza</a><div style="color:red; font-style:italic">Jorge Pérez</div>'}, 'CFO', ''],
          [{v:'GS', f:'<a href="#"><a href="#">Gerente de Seguridad</a><div style="color:red; font-style:italic">Rogelio Mendiola</div>'}, 'DO', ''],
          [{v:'GGI', f:'<a href="#"><a href="#">Gerente General INTECSA</a><div style="color:red; font-style:italic">María de Jesús González</div>'}, 'DO', ''],
          [{v:'DNC', f:'<a href="#"><a href="#">Director Nacional Cementerios</a><div style="color:red; font-style:italic">Jorge Rodríguez</div>'}, 'DO', ''],
          [{v:'DI', f:'<a href="#"><a href="#">Director Infraestructura</a><div style="color:red; font-style:italic">Guillermo Alejandro</div>'}, 'DO', ''],
          [{v:'DNM', f:'<a href="#"><a href="#">Director Nacional Mantenimiento</a><div style="color:red; font-style:italic">Mauricio Valencia</div>'}, 'DO', ''],          
          [{v:'GIN', f:'<a href="#"><a href="#">Gerente Inteligencia de Negocio</a><div style="color:red; font-style:italic">Jorge Arriola</div>'}, 'DPM', ''],          
          [{v:'GEC', f:'<a href="#"><a href="#">Gerente Estrategia Comercial</a><div style="color:red; font-style:italic">Fernando Flores</div>'}, 'DPM', ''],          
          [{v:'GDNM', f:'<a href="#"><a href="#">Gerente Desarrollo Negocios MKT</a><div style="color:red; font-style:italic">Yoani Lorenzo</div>'}, 'DPM', ''],          
          [{v:'GA1', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Guadalupe Duarte</div>'}, 'DA', ''],          
          [{v:'GA2', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Ignacio Benitez</div>'}, 'DA', ''],          
          [{v:'GA3', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">José Morales</div>'}, 'DA', ''],          
          [{v:'GA4', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Isabel Butanda</div>'}, 'DA', ''],          
          [{v:'GA5', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María de Jesús Loera</div>'}, 'DA', ''],          
          [{v:'GA6', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María de Jesús Lira</div>'}, 'DA', ''],          
          [{v:'GA7', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Obed López</div>'}, 'DA', ''],          
          [{v:'GA8', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Alejandro Pizaña</div>'}, 'DA', ''],          
          [{v:'GA9', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María Guadalupe Bueno</div>'}, 'DA', ''],          
          [{v:'GNAE', f:'<a href="#"><a href="#">Gerente Nacional de Activos Estratégicos</a><div style="color:red; font-style:italic">Alejandra Mendoza</div>'}, 'DA', ''],          
          [{v:'GTI', f:'<a href="#"><a href="#">Gerente Tesorería</a><div style="color:red; font-style:italic">José Luis Arámbula</div>'}, 'DITR', ''],          
          [{v:'GCC', f:'<a href="#"><a href="#">Gerente Capilla Cuernavaca</a><div style="color:red; font-style:italic">Ruben Navarro</div>'}, 'DRCVM', ''],          
          [{v:'GCCS', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Sullivan</a><div style="color:red; font-style:italic">José Antonio Ruíz</div>'}, 'DRCVM', ''],          
          [{v:'GCCC', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Colima</a><div style="color:red; font-style:italic">teresita de Jesús Gutiérrez</div>'}, 'DRCVM', ''],          
          [{v:'GCCSM', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Santa Mónica</a><div style="color:red; font-style:italic">Rodolfo Vega</div>'}, 'DRCVM', ''],          
          [{v:'GCCFC', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Félix Cuevas/LM</a><div style="color:red; font-style:italic">Patrick Hill</div>'}, 'DRCVM', ''],          
          [{v:'GCVM', f:'<a href="#"><a href="#">Gerente Comercial Valle México</a><div style="color:red; font-style:italic">Teresa del Río</div>'}, 'DRCVM', ''],          
          [{v:'GCCA', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Acapulco</a><div style="color:red; font-style:italic">José Luis Parra</div>'}, 'DRCVM', ''],          
          [{v:'GCCAGS', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Aguascalientes</a><div style="color:red; font-style:italic">Isidro Villanueva</div>'}, 'DRCB', ''],          
          [{v:'GCCG', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Guadalajara</a><div style="color:red; font-style:italic">Liliana Gutiérrez</div>'}, 'DRCB', ''],          
          [{v:'GCCI', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Irapuato</a><div style="color:red; font-style:italic">Marina Carreón</div>'}, 'DRCB', ''],          
          [{v:'GCCL', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios León</a><div style="color:red; font-style:italic">Verónica Navarrete</div>'}, 'DRCB', ''],          
          [{v:'GCCM', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Morelia</a><div style="color:red; font-style:italic">Martín Huerta</div>'}, 'DRCB', ''],          
          [{v:'GCCMTY', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Monterrey</a><div style="color:red; font-style:italic">Beatríz Becerril</div>'}, 'DRCB', ''],          
          [{v:'GCCMXI', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Mexicali</a><div style="color:red; font-style:italic">Nora Andrade</div>'}, 'DRCN', ''],          
          [{v:'GCCR', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Reynosa</a><div style="color:red; font-style:italic">Diana Cruz</div>'}, 'DRCN', ''],          
          [{v:'GCCTIJ', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Tijuana</a><div style="color:red; font-style:italic">Abril Solis</div>'}, 'DRCN', ''],          
          [{v:'GCCT', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Torreón</a><div style="color:red; font-style:italic">Aracely Contreras</div>'}, 'DRCN', ''],          
          [{v:'DCCPT', f:'<a href="#"><a href="#">Director Convenios Corporativos</a><div style="color:red; font-style:italic">Roberto Valdez</div>'}, 'DRVM2', ''],
          [{v:'GCCT', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Torreón</a><div style="color:red; font-style:italic">Aracely Contreras</div>'}, 'DRVM2', ''],
          [{v:'DVPCA', f:'<a href="#"><a href="#">Director Ventas Previsión Canales Alternos</a><div style="color:red; font-style:italic">Yasmín Vedia</div>'}, 'DRVM2', ''],
          [{v:'DVPVM', f:'<a href="#"><a href="#">Director Ventas Previsión Del Valle</a><div style="color:red; font-style:italic">José Cisneros</div>'}, 'DRVM2', ''],
          [{v:'DVPP', f:'<a href="#"><a href="#">Director Ventas Previsión Poniente</a><div style="color:red; font-style:italic">Alberto Munguía</div>'}, 'DRVM2', ''],
          [{v:'DVPA', f:'<a href="#"><a href="#">Director Ventas Previsión Acapulco</a><div style="color:red; font-style:italic">Alma Marroquín</div>'}, 'DRVM1', ''],
          [{v:'DVPG', f:'<a href="#"><a href="#">Director Ventas Previsión Guardias</a><div style="color:red; font-style:italic">Nidia González</div>'}, 'DRVM1', ''],
          [{v:'DVPN', f:'<a href="#"><a href="#">Director Ventas Previsión Norte</a><div style="color:red; font-style:italic">Adriana Rosales</div>'}, 'DRVM1', ''],
          [{v:'DVPS', f:'<a href="#"><a href="#">Director Ventas Previsión Sur</a><div style="color:red; font-style:italic">Paula Alfaro</div>'}, 'DRVM1', ''],
          [{v:'GDV1', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Francisco Palacios</div>'}, 'DVPCA', ''],
          [{v:'GDV2', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Arturo González</div>'}, 'DVPCA', ''],
          [{v:'GDV3', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Yadira Ramírez</div>'}, 'DVPP', ''],
          [{v:'GDVM', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas/Módulos</a><div style="color:red; font-style:italic">Alfredo Carreón</div>'}, 'DVPG', ''],
          [{v:'GDV4', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Carlos Rodríguez</div>'}, 'DVPN', ''],
          [{v:'DVPGDL', f:'<a href="#"><a href="#">Director Ventas Previsión Guadalajara</a><div style="color:red; font-style:italic">Alberto Lomelí</div>'}, 'DRVPN', ''],
          [{v:'DVPMXI', f:'<a href="#"><a href="#">Director Ventas Previsión Mexicali</a><div style="color:red; font-style:italic">Álvaro Aldana</div>'}, 'DRVPN', ''],
          [{v:'DVPR', f:'<a href="#"><a href="#">Director Ventas Previsión Reynosa</a><div style="color:red; font-style:italic">Jorge Lucio</div>'}, 'DRVPN', ''],
          [{v:'DVPTIJ', f:'<a href="#"><a href="#">Director Ventas Previsión Tijuana</a><div style="color:red; font-style:italic">Alejandro Hernández</div>'}, 'DRVPN', ''],
          [{v:'DVPT', f:'<a href="#"><a href="#">Director Ventas Previsión Torreón</a><div style="color:red; font-style:italic">Alfredo Álvarez</div>'}, 'DRVPN', ''],
          [{v:'DVPAGS', f:'<a href="#"><a href="#">Director Ventas Previsión Aguascalientes</a><div style="color:red; font-style:italic">Mario Ayala</div>'}, 'DRVB', ''],
          [{v:'DVPL', f:'<a href="#"><a href="#">Director Ventas Previsión León</a><div style="color:red; font-style:italic">Alma Belmont</div>'}, 'DRVB', ''],
          [{v:'DVPI', f:'<a href="#"><a href="#">Director Ventas Previsión Irapuato</a><div style="color:red; font-style:italic">Jorge Luna</div>'}, 'DRVB', ''],
          [{v:'DVPMS', f:'<a href="#"><a href="#">Director Ventas Previsión Monterrey Zona Sur</a><div style="color:red; font-style:italic">Sandra Tapia</div>'}, 'DRVB', ''],
          [{v:'DVPMN', f:'<a href="#"><a href="#">Director Ventas Previsión Monterrey Zona Norte</a><div style="color:red; font-style:italic">Federico Montes de Oca</div>'}, 'DRVB', ''],
          [{v:'DVPM', f:'<a href="#"><a href="#">Director Ventas Previsión Morelia</a><div style="color:red; font-style:italic">Maria Venzor</div>'}, 'DRVB', ''],
          [{v:'GDVG', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas/Guardias</a><div style="color:red; font-style:italic">Sandra Pulido</div>'}, 'DVPG', ''],
          [{v:'GDV5', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Eduardo Huerta</div>'}, 'GDVG', ''],
          [{v:'GDV6', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Claudia Díaz</div>'}, 'GDVG', ''],
          [{v:'GDV7', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Lizbeth Negrete</div>'}, 'GDVG', ''],
          [{v:'GDV8', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Ericka Armeria</div>'}, 'GDVG', ''],
          [{v:'GDV9', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alfredo Álvarez</div>'}, 'GDVG', ''],
          [{v:'GDV10', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Ana García</div>'}, 'DVPTIJ', ''],
          [{v:'GDV11', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Diana Corral</div>'}, 'DVPTIJ', ''],
          [{v:'GDV12', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">María Piedra</div>'}, 'DVPTIJ', ''],
          [{v:'GDV13', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Juan González</div>'}, 'DVPTIJ', ''],
          [{v:'GDV14', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Marina Ríos</div>'}, 'DVPT', ''],
          [{v:'GDV15', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Fabiola Castruita</div>'}, 'DVPT', ''],
          [{v:'GDV16', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Daniel Martínez</div>'}, 'DVPMS', ''],
          [{v:'GDV17', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alejandro Espinosa</div>'}, 'DVPMS', ''],
          [{v:'GDV18', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alma Benavides</div>'}, 'DVPMS', ''],
          [{v:'GDV19', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">María Wong</div>'}, 'DVPMN', ''],
          [{v:'GDV20', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Martha Álvarez</div>'}, 'DVPM', '']
          
          
          
          
        ]);
        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Listen for 'ready' event
  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      chart.collapse(i, true);
    }
  });
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {allowHtml:true, allowCollapse: true});
      }
   </script>
    </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>
Joss
  • 43
  • 3

2 Answers2

1

Wanted to share a solution I wrote recently based on two other posts provided by @WhiteHat . It fixes the bug he mentioned using a different approach but combining his ideas.
Chart off screen (answer below)
Send Email Link from Google Org Chart

  1. Javascript library called Lodash is used for grouping the children by parent ID. This array is used to add/remove children on demand when a node is clicked.
  2. Click event on the visualization container is used to Expand/Collapse each node instead of the google select event listener. This allows a hyperlink to be included in the formatted content of each node.

Many thanks to Mr. @WhiteHat for helping the community with his expertise.

Here is the full demo:

google.charts.load("current", { packages: ["orgchart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  //#region Grouped Parents w/Children
  /*
  [ { v: "2-G02", f: "<div>" }, "2", ""]
  [ { v: ID, f: "<div>" }, PARENT, TOOLTIP]
  */

  const group_byParent = _(dataTable)
    .groupBy((o) => {
      return o[1];
    })
    .value();
  //console.log(group_byParent);
  //#endregion

  //#region Push level 0 parents
  const nodesVisible = [
    //Collector for visible nodes to redraw chart on expand/collapse.
    [
      { id: "name", label: "Name", type: "string" },
      { id: "manager", label: "Manager", type: "string" },
      { type: "string", role: "tooltip", p: { html: true } },
    ],
  ];

  const nodesLevel0 = _.filter(dataTable, (o) => {
    return o[1] === "";
  }); //where ParentID o[1] is blank
  nodesLevel0.forEach((n) => {
    nodesVisible.push(n);
  });

  //#endregion

  let data = google.visualization.arrayToDataTable(nodesVisible);
  const container = document.getElementById("chart_div");
  const chart = new google.visualization.OrgChart(container);
  const options = { allowHtml: true, allowCollapse: true };

  const selection = { row: 0, column: null };
  container.addEventListener(
    "click",
    (e) => {
      e.preventDefault();

      //GATEKEEPER - if an anchor tag (<a>), then follow the address
      if (e.target.tagName.toUpperCase() === "A") {
        window.open(e.target.href, "_blank"); // OR location.href = e.target.href;
        return false;
      }

      // Is the node selected? Then record the selection.
      //  NOTE: clicking node the 2nd time in a row deselects it(so.getSelection returns undefined).
      const isNodeSelected = chart.getSelection()[0] ? true : false;
      isNodeSelected ? (selection.row = chart.getSelection()[0].row) : null;

      const { row } = selection;
      const nodeSelectionID = data.getValue(row, 0);
      const nodeChildren = chart.getChildrenIndexes(row);
      const hasChildren = nodeChildren.length > 0 ? true : false;

      if (!hasChildren) {
        //EXPAND NODE
        const nodeChildrenToAdd = group_byParent[nodeSelectionID] || [];
        nodeChildrenToAdd.forEach((c) => {
          nodesVisible.push(c);
        });
      }

      if (hasChildren) {
        //COLLAPSE NODE

        const whileCollector = [];
        const childrenToRemove = [];

        //Step 1 - Find immediate children of selected parent node.
        const immediateChildren = group_byParent[nodeSelectionID] || [];
        immediateChildren.forEach((c) => {
          const childID = c[0].v;
          whileCollector.push(childID);
          childrenToRemove.push(childID);
        });

        //Step 2 - find all descendants of immediate children.
        while (whileCollector.length > 0) {
          const descendantID = whileCollector[0];
          const getChildren = group_byParent[descendantID] ? group_byParent[descendantID] : [];
          getChildren.forEach((c) => {
            const childID = c[0].v;
            whileCollector.push(childID);
            childrenToRemove.push(childID);
          });
          whileCollector.shift();
        }

        //Step 3 - remove all childrenToRemove from nodesVisible.
        const nodeChildrenRemoved = _.remove(nodesVisible, (o, i) => {
          const nodeID = o[0].v;
          const matchFound = _.indexOf(childrenToRemove, nodeID) !== -1 ? true : false;
          return matchFound;
        });
      }

      data = google.visualization.arrayToDataTable(nodesVisible);
      chart.draw(data, options);

      return false;
    },
    false
  ); //END container.addEventListener("click"

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script>

const dataTable = [
  [{v:'CEO', f:'<a href="#">Director Nacional</a><div style="color:red; font-style:italic">Carlos Lukac</div>'}, '', ''],
  [{v:'DRH', f:'<a href="#"><a href="#">Director RH</a><div style="color:red; font-style:italic">Luis Arturo Flores</div>'}, 'CEO', ''],
  [{v:'DNCC', f:'<a href="#">Director Nacional de Capillas y Cementerios</a><div style="color:red; font-style:italic">Ursula Gartz</div>'}, 'CEO', ''],
  [{v:'DO', f:'<a href="#">Director Operaciones</a><div style="color:red; font-style:italic">Alejandro Sosa</div>'}, 'CEO', ''],
  [{v:'CFO', f:'<a href="#">CFO</a><div style="color:red; font-style:italic">Octavio Trejo</div>'}, 'CEO', 'CFO'],
  [{v:'DNVP', f:'<a href="#">Director Nacional Ventas de Previsión</a><div style="color:red; font-style:italic">Everardo García</div>'}, 'CEO', ''],
  [{v:'DRI', f:'<a href="#"><a href="#">Director de Relaciones Institucionales</a><div style="color:red; font-style:italic">Francisco Carriedo</div>'}, 'CEO', ''],
  [{v:'DPM', f:'<a href="#"><a href="#">Director Planeación y Marketing</a><div style="color:red; font-style:italic">Oscar Chávez</div>'}, 'CEO', ''],
  [{v:'GDO', f:'<a href="#"><a href="#">Gerente de Desarrollo Organizacional</a><div style="color:red; font-style:italic">Jeannette González</div>'}, 'DRH', ''],
  [{v:'GerenteVacante', f:'<a href="#">Gerente de Reclutamiento y Selección</a><div style="color:red; font-style:italic">Vacante</div>'}, 'DRH', ''],
  [{v:'HectorGarcia', f:'<a href="#">Gerente Administración de RH</a><div style="color:red; font-style:italic">Hector García Piñón</div>'}, 'DRH', ''],
  [{v:'BenjaminM', f:'<a href="#">Gerente de Relaciones Públicas</a><div style="color:red; font-style:italic">Benjamín Martínez</div>'}, 'DNCC', ''],
  [{v:'Gaudencia', f:'<a href="#">Gerente Servicios Complementarios</a><div style="color:red; font-style:italic">Gaudencia García</div>'}, 'DNCC', ''],
  [{v:'DRCVM', f:'<a href="#">Director Regional Capillas Valle de México</a><div style="color:red; font-style:italic">Víctor Hernández</div>'}, 'DNCC', ''],
  [{v:'DRCB', f:'<a href="#">Director Regional Capillas Bajío</a><div style="color:red; font-style:italic">Jesús Campos</div>'}, 'DNCC', ''],
  [{v:'DRCN', f:'<a href="#">Director Regional Capillas Norte</a><div style="color:red; font-style:italic">Sergio Nieto</div>'}, 'DNCC', ''],
  [{v:'GT', f:'<a href="#"><a href="#">Gerente Telemarketing</a><div style="color:red; font-style:italic">Fernando Moreno</div>'}, 'DNVP', ''],
  [{v:'GOC', f:'<a href="#"><a href="#">Gerente Operación Comercial</a><div style="color:red; font-style:italic">Ignacio Rosado</div>'}, 'DNVP', ''],
  [{v:'DRVM1', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 1</a><div style="color:red; font-style:italic">Marco Moreno</div>'}, 'DNVP', ''],
  [{v:'DRVM2', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 2</a><div style="color:red; font-style:italic">Juan Salvador Díaz</div>'}, 'DNVP', ''],
  [{v:'DRVPN', f:'<a href="#"><a href="#">Director Regional Ventas Valle Pacífico/Norte</a><div style="color:red; font-style:italic">Ricardo Lemus</div>'}, 'DNVP', ''],
  [{v:'DRVB', f:'<a href="#"><a href="#">Director Regional Ventas Bajío</a><div style="color:red; font-style:italic">Sinuhé Margarito</div>'}, 'DNVP', ''],
  [{v:'DRVM1', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 1</a><div style="color:red; font-style:italic">Marco Moreno</div>'}, 'DNVP', ''],
  [{v:'DITR', f:'<a href="#"><a href="#">Director Impuestos, Tesorería y Riesgos</a><div style="color:red; font-style:italic">Ramón Laguna</div>'}, 'CFO', ''],
  [{v:'DAI', f:'<a href="#"><a href="#">Director Auditoría Interna</a><div style="color:red; font-style:italic">Alfredo García</div>'}, 'CFO', ''],
  [{v:'DJ', f:'<a href="#"><a href="#">Director Jurídico</a><div style="color:red; font-style:italic">José Carrillo</div>'}, 'CFO', ''],
  [{v:'DPF', f:'<a href="#"><a href="#">Director Planeación FInanciera</a><div style="color:red; font-style:italic">Guillermo Perea</div>'}, 'CFO', ''],
  [{v:'DC', f:'<a href="#"><a href="#">Director Contraloría</a><div style="color:red; font-style:italic">Marco Vallejo</div>'}, 'CFO', ''],
  [{v:'DRTI', f:'<a href="#"><a href="#">Director de Tecnología de Informática</a><div style="color:red; font-style:italic">Isela Montenegro</div>'}, 'CFO', ''],
  [{v:'DA', f:'<a href="#"><a href="#">Director Administrativo</a><div style="color:red; font-style:italic">Gabriela Cruz</div>'}, 'CFO', ''],
  [{v:'DCZ', f:'<a href="#"><a href="#">Director Cobranza</a><div style="color:red; font-style:italic">Jorge Pérez</div>'}, 'CFO', ''],
  [{v:'GS', f:'<a href="#"><a href="#">Gerente de Seguridad</a><div style="color:red; font-style:italic">Rogelio Mendiola</div>'}, 'DO', ''],
  [{v:'GGI', f:'<a href="#"><a href="#">Gerente General INTECSA</a><div style="color:red; font-style:italic">María de Jesús González</div>'}, 'DO', ''],
  [{v:'DNC', f:'<a href="#"><a href="#">Director Nacional Cementerios</a><div style="color:red; font-style:italic">Jorge Rodríguez</div>'}, 'DO', ''],
  [{v:'DI', f:'<a href="#"><a href="#">Director Infraestructura</a><div style="color:red; font-style:italic">Guillermo Alejandro</div>'}, 'DO', ''],
  [{v:'DNM', f:'<a href="#"><a href="#">Director Nacional Mantenimiento</a><div style="color:red; font-style:italic">Mauricio Valencia</div>'}, 'DO', ''],
  [{v:'GIN', f:'<a href="#"><a href="#">Gerente Inteligencia de Negocio</a><div style="color:red; font-style:italic">Jorge Arriola</div>'}, 'DPM', ''],
  [{v:'GEC', f:'<a href="#"><a href="#">Gerente Estrategia Comercial</a><div style="color:red; font-style:italic">Fernando Flores</div>'}, 'DPM', ''],
  [{v:'GDNM', f:'<a href="#"><a href="#">Gerente Desarrollo Negocios MKT</a><div style="color:red; font-style:italic">Yoani Lorenzo</div>'}, 'DPM', ''],
  [{v:'GA1', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Guadalupe Duarte</div>'}, 'DA', ''],
  [{v:'GA2', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Ignacio Benitez</div>'}, 'DA', ''],
  [{v:'GA3', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">José Morales</div>'}, 'DA', ''],
  [{v:'GA4', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Isabel Butanda</div>'}, 'DA', ''],
  [{v:'GA5', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María de Jesús Loera</div>'}, 'DA', ''],
  [{v:'GA6', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María de Jesús Lira</div>'}, 'DA', ''],
  [{v:'GA7', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Obed López</div>'}, 'DA', ''],
  [{v:'GA8', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Alejandro Pizaña</div>'}, 'DA', ''],
  [{v:'GA9', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María Guadalupe Bueno</div>'}, 'DA', ''],
  [{v:'GNAE', f:'<a href="#"><a href="#">Gerente Nacional de Activos Estratégicos</a><div style="color:red; font-style:italic">Alejandra Mendoza</div>'}, 'DA', ''],
  [{v:'GTI', f:'<a href="#"><a href="#">Gerente Tesorería</a><div style="color:red; font-style:italic">José Luis Arámbula</div>'}, 'DITR', ''],
  [{v:'GCC', f:'<a href="#"><a href="#">Gerente Capilla Cuernavaca</a><div style="color:red; font-style:italic">Ruben Navarro</div>'}, 'DRCVM', ''],
  [{v:'GCCS', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Sullivan</a><div style="color:red; font-style:italic">José Antonio Ruíz</div>'}, 'DRCVM', ''],
  [{v:'GCCC', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Colima</a><div style="color:red; font-style:italic">teresita de Jesús Gutiérrez</div>'}, 'DRCVM', ''],
  [{v:'GCCSM', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Santa Mónica</a><div style="color:red; font-style:italic">Rodolfo Vega</div>'}, 'DRCVM', ''],
  [{v:'GCCFC', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Félix Cuevas/LM</a><div style="color:red; font-style:italic">Patrick Hill</div>'}, 'DRCVM', ''],
  [{v:'GCVM', f:'<a href="#"><a href="#">Gerente Comercial Valle México</a><div style="color:red; font-style:italic">Teresa del Río</div>'}, 'DRCVM', ''],
  [{v:'GCCA', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Acapulco</a><div style="color:red; font-style:italic">José Luis Parra</div>'}, 'DRCVM', ''],
  [{v:'GCCAGS', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Aguascalientes</a><div style="color:red; font-style:italic">Isidro Villanueva</div>'}, 'DRCB', ''],
  [{v:'GCCG', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Guadalajara</a><div style="color:red; font-style:italic">Liliana Gutiérrez</div>'}, 'DRCB', ''],
  [{v:'GCCI', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Irapuato</a><div style="color:red; font-style:italic">Marina Carreón</div>'}, 'DRCB', ''],
  [{v:'GCCL', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios León</a><div style="color:red; font-style:italic">Verónica Navarrete</div>'}, 'DRCB', ''],
  [{v:'GCCM', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Morelia</a><div style="color:red; font-style:italic">Martín Huerta</div>'}, 'DRCB', ''],
  [{v:'GCCMTY', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Monterrey</a><div style="color:red; font-style:italic">Beatríz Becerril</div>'}, 'DRCB', ''],
  [{v:'GCCMXI', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Mexicali</a><div style="color:red; font-style:italic">Nora Andrade</div>'}, 'DRCN', ''],
  [{v:'GCCR', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Reynosa</a><div style="color:red; font-style:italic">Diana Cruz</div>'}, 'DRCN', ''],
  [{v:'GCCTIJ', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Tijuana</a><div style="color:red; font-style:italic">Abril Solis</div>'}, 'DRCN', ''],
  [{v:'GCCT', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Torreón</a><div style="color:red; font-style:italic">Aracely Contreras</div>'}, 'DRCN', ''],
  [{v:'DCCPT', f:'<a href="#"><a href="#">Director Convenios Corporativos</a><div style="color:red; font-style:italic">Roberto Valdez</div>'}, 'DRVM2', ''],
  [{v:'GCCT', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Torreón</a><div style="color:red; font-style:italic">Aracely Contreras</div>'}, 'DRVM2', ''],
  [{v:'DVPCA', f:'<a href="#"><a href="#">Director Ventas Previsión Canales Alternos</a><div style="color:red; font-style:italic">Yasmín Vedia</div>'}, 'DRVM2', ''],
  [{v:'DVPVM', f:'<a href="#"><a href="#">Director Ventas Previsión Del Valle</a><div style="color:red; font-style:italic">José Cisneros</div>'}, 'DRVM2', ''],
  [{v:'DVPP', f:'<a href="#"><a href="#">Director Ventas Previsión Poniente</a><div style="color:red; font-style:italic">Alberto Munguía</div>'}, 'DRVM2', ''],
  [{v:'DVPA', f:'<a href="#"><a href="#">Director Ventas Previsión Acapulco</a><div style="color:red; font-style:italic">Alma Marroquín</div>'}, 'DRVM1', ''],
  [{v:'DVPG', f:'<a href="#"><a href="#">Director Ventas Previsión Guardias</a><div style="color:red; font-style:italic">Nidia González</div>'}, 'DRVM1', ''],
  [{v:'DVPN', f:'<a href="#"><a href="#">Director Ventas Previsión Norte</a><div style="color:red; font-style:italic">Adriana Rosales</div>'}, 'DRVM1', ''],
  [{v:'DVPS', f:'<a href="#"><a href="#">Director Ventas Previsión Sur</a><div style="color:red; font-style:italic">Paula Alfaro</div>'}, 'DRVM1', ''],
  [{v:'GDV1', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Francisco Palacios</div>'}, 'DVPCA', ''],
  [{v:'GDV2', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Arturo González</div>'}, 'DVPCA', ''],
  [{v:'GDV3', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Yadira Ramírez</div>'}, 'DVPP', ''],
  [{v:'GDVM', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas/Módulos</a><div style="color:red; font-style:italic">Alfredo Carreón</div>'}, 'DVPG', ''],
  [{v:'GDV4', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Carlos Rodríguez</div>'}, 'DVPN', ''],
  [{v:'DVPGDL', f:'<a href="#"><a href="#">Director Ventas Previsión Guadalajara</a><div style="color:red; font-style:italic">Alberto Lomelí</div>'}, 'DRVPN', ''],
  [{v:'DVPMXI', f:'<a href="#"><a href="#">Director Ventas Previsión Mexicali</a><div style="color:red; font-style:italic">Álvaro Aldana</div>'}, 'DRVPN', ''],
  [{v:'DVPR', f:'<a href="#"><a href="#">Director Ventas Previsión Reynosa</a><div style="color:red; font-style:italic">Jorge Lucio</div>'}, 'DRVPN', ''],
  [{v:'DVPTIJ', f:'<a href="#"><a href="#">Director Ventas Previsión Tijuana</a><div style="color:red; font-style:italic">Alejandro Hernández</div>'}, 'DRVPN', ''],
  [{v:'DVPT', f:'<a href="#"><a href="#">Director Ventas Previsión Torreón</a><div style="color:red; font-style:italic">Alfredo Álvarez</div>'}, 'DRVPN', ''],
  [{v:'DVPAGS', f:'<a href="#"><a href="#">Director Ventas Previsión Aguascalientes</a><div style="color:red; font-style:italic">Mario Ayala</div>'}, 'DRVB', ''],
  [{v:'DVPL', f:'<a href="#"><a href="#">Director Ventas Previsión León</a><div style="color:red; font-style:italic">Alma Belmont</div>'}, 'DRVB', ''],
  [{v:'DVPI', f:'<a href="#"><a href="#">Director Ventas Previsión Irapuato</a><div style="color:red; font-style:italic">Jorge Luna</div>'}, 'DRVB', ''],
  [{v:'DVPMS', f:'<a href="#"><a href="#">Director Ventas Previsión Monterrey Zona Sur</a><div style="color:red; font-style:italic">Sandra Tapia</div>'}, 'DRVB', ''],
  [{v:'DVPMN', f:'<a href="#"><a href="#">Director Ventas Previsión Monterrey Zona Norte</a><div style="color:red; font-style:italic">Federico Montes de Oca</div>'}, 'DRVB', ''],
  [{v:'DVPM', f:'<a href="#"><a href="#">Director Ventas Previsión Morelia</a><div style="color:red; font-style:italic">Maria Venzor</div>'}, 'DRVB', ''],
  [{v:'GDVG', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas/Guardias</a><div style="color:red; font-style:italic">Sandra Pulido</div>'}, 'DVPG', ''],
  [{v:'GDV5', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Eduardo Huerta</div>'}, 'GDVG', ''],
  [{v:'GDV6', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Claudia Díaz</div>'}, 'GDVG', ''],
  [{v:'GDV7', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Lizbeth Negrete</div>'}, 'GDVG', ''],
  [{v:'GDV8', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Ericka Armeria</div>'}, 'GDVG', ''],
  [{v:'GDV9', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alfredo Álvarez</div>'}, 'GDVG', ''],
  [{v:'GDV10', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Ana García</div>'}, 'DVPTIJ', ''],
  [{v:'GDV11', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Diana Corral</div>'}, 'DVPTIJ', ''],
  [{v:'GDV12', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">María Piedra</div>'}, 'DVPTIJ', ''],
  [{v:'GDV13', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Juan González</div>'}, 'DVPTIJ', ''],
  [{v:'GDV14', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Marina Ríos</div>'}, 'DVPT', ''],
  [{v:'GDV15', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Fabiola Castruita</div>'}, 'DVPT', ''],
  [{v:'GDV16', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Daniel Martínez</div>'}, 'DVPMS', ''],
  [{v:'GDV17', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alejandro Espinosa</div>'}, 'DVPMS', ''],
  [{v:'GDV18', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alma Benavides</div>'}, 'DVPMS', ''],
  [{v:'GDV19', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">María Wong</div>'}, 'DVPMN', ''],
  [{v:'GDV20', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Martha Álvarez</div>'}, 'DVPM', '']
];
</script>

<div id="chart_div"></div>
cmill
  • 849
  • 7
  • 20
0

this was my attempt, it doesn't work correctly, but should be close
maybe you can get it to work

basically, it uses the DataView Class to only show the rows the user has selected

this limits the chart to just the CEO
view.setRows([0]);

then on 'select' find direct reports for CEO and show / hide those
view.setRows([0, 1, 2, 3, 4, 5, 6, 7]);

the main drawback being the chart appears jumpy when expanding / collapsing (on 'select')

something to check --> click on CEO, then CFO, then "Director de Tecnología de Informática -- Isela Montenegro"

something appears and hides off to the right,
but don't think that node should have any direct reports... 

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');

  data.addRows([
    [{v:'CEO', f:'<a href="#">Director Nacional</a><div style="color:red; font-style:italic">Carlos Lukac</div>'}, '', ''],
    [{v:'DRH', f:'<a href="#"><a href="#">Director RH</a><div style="color:red; font-style:italic">Luis Arturo Flores</div>'}, 'CEO', ''],
    [{v:'DNCC', f:'<a href="#">Director Nacional de Capillas y Cementerios</a><div style="color:red; font-style:italic">Ursula Gartz</div>'}, 'CEO', ''],
    [{v:'DO', f:'<a href="#">Director Operaciones</a><div style="color:red; font-style:italic">Alejandro Sosa</div>'}, 'CEO', ''],
    [{v:'CFO', f:'<a href="#">CFO</a><div style="color:red; font-style:italic">Octavio Trejo</div>'}, 'CEO', 'CFO'],
    [{v:'DNVP', f:'<a href="#">Director Nacional Ventas de Previsión</a><div style="color:red; font-style:italic">Everardo García</div>'}, 'CEO', ''],
    [{v:'DRI', f:'<a href="#"><a href="#">Director de Relaciones Institucionales</a><div style="color:red; font-style:italic">Francisco Carriedo</div>'}, 'CEO', ''],
    [{v:'DPM', f:'<a href="#"><a href="#">Director Planeación y Marketing</a><div style="color:red; font-style:italic">Oscar Chávez</div>'}, 'CEO', ''],
    [{v:'GDO', f:'<a href="#"><a href="#">Gerente de Desarrollo Organizacional</a><div style="color:red; font-style:italic">Jeannette González</div>'}, 'DRH', ''],
    [{v:'GerenteVacante', f:'<a href="#">Gerente de Reclutamiento y Selección</a><div style="color:red; font-style:italic">Vacante</div>'}, 'DRH', ''],
    [{v:'HectorGarcia', f:'<a href="#">Gerente Administración de RH</a><div style="color:red; font-style:italic">Hector García Piñón</div>'}, 'DRH', ''],
    [{v:'BenjaminM', f:'<a href="#">Gerente de Relaciones Públicas</a><div style="color:red; font-style:italic">Benjamín Martínez</div>'}, 'DNCC', ''],
    [{v:'Gaudencia', f:'<a href="#">Gerente Servicios Complementarios</a><div style="color:red; font-style:italic">Gaudencia García</div>'}, 'DNCC', ''],
    [{v:'DRCVM', f:'<a href="#">Director Regional Capillas Valle de México</a><div style="color:red; font-style:italic">Víctor Hernández</div>'}, 'DNCC', ''],
    [{v:'DRCB', f:'<a href="#">Director Regional Capillas Bajío</a><div style="color:red; font-style:italic">Jesús Campos</div>'}, 'DNCC', ''],
    [{v:'DRCN', f:'<a href="#">Director Regional Capillas Norte</a><div style="color:red; font-style:italic">Sergio Nieto</div>'}, 'DNCC', ''],
    [{v:'GT', f:'<a href="#"><a href="#">Gerente Telemarketing</a><div style="color:red; font-style:italic">Fernando Moreno</div>'}, 'DNVP', ''],
    [{v:'GOC', f:'<a href="#"><a href="#">Gerente Operación Comercial</a><div style="color:red; font-style:italic">Ignacio Rosado</div>'}, 'DNVP', ''],
    [{v:'DRVM1', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 1</a><div style="color:red; font-style:italic">Marco Moreno</div>'}, 'DNVP', ''],
    [{v:'DRVM2', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 2</a><div style="color:red; font-style:italic">Juan Salvador Díaz</div>'}, 'DNVP', ''],
    [{v:'DRVPN', f:'<a href="#"><a href="#">Director Regional Ventas Valle Pacífico/Norte</a><div style="color:red; font-style:italic">Ricardo Lemus</div>'}, 'DNVP', ''],
    [{v:'DRVB', f:'<a href="#"><a href="#">Director Regional Ventas Bajío</a><div style="color:red; font-style:italic">Sinuhé Margarito</div>'}, 'DNVP', ''],
    [{v:'DRVM1', f:'<a href="#"><a href="#">Director Regional Ventas Valle México 1</a><div style="color:red; font-style:italic">Marco Moreno</div>'}, 'DNVP', ''],
    [{v:'DITR', f:'<a href="#"><a href="#">Director Impuestos, Tesorería y Riesgos</a><div style="color:red; font-style:italic">Ramón Laguna</div>'}, 'CFO', ''],
    [{v:'DAI', f:'<a href="#"><a href="#">Director Auditoría Interna</a><div style="color:red; font-style:italic">Alfredo García</div>'}, 'CFO', ''],
    [{v:'DJ', f:'<a href="#"><a href="#">Director Jurídico</a><div style="color:red; font-style:italic">José Carrillo</div>'}, 'CFO', ''],
    [{v:'DPF', f:'<a href="#"><a href="#">Director Planeación FInanciera</a><div style="color:red; font-style:italic">Guillermo Perea</div>'}, 'CFO', ''],
    [{v:'DC', f:'<a href="#"><a href="#">Director Contraloría</a><div style="color:red; font-style:italic">Marco Vallejo</div>'}, 'CFO', ''],
    [{v:'DRTI', f:'<a href="#"><a href="#">Director de Tecnología de Informática</a><div style="color:red; font-style:italic">Isela Montenegro</div>'}, 'CFO', ''],
    [{v:'DA', f:'<a href="#"><a href="#">Director Administrativo</a><div style="color:red; font-style:italic">Gabriela Cruz</div>'}, 'CFO', ''],
    [{v:'DCZ', f:'<a href="#"><a href="#">Director Cobranza</a><div style="color:red; font-style:italic">Jorge Pérez</div>'}, 'CFO', ''],
    [{v:'GS', f:'<a href="#"><a href="#">Gerente de Seguridad</a><div style="color:red; font-style:italic">Rogelio Mendiola</div>'}, 'DO', ''],
    [{v:'GGI', f:'<a href="#"><a href="#">Gerente General INTECSA</a><div style="color:red; font-style:italic">María de Jesús González</div>'}, 'DO', ''],
    [{v:'DNC', f:'<a href="#"><a href="#">Director Nacional Cementerios</a><div style="color:red; font-style:italic">Jorge Rodríguez</div>'}, 'DO', ''],
    [{v:'DI', f:'<a href="#"><a href="#">Director Infraestructura</a><div style="color:red; font-style:italic">Guillermo Alejandro</div>'}, 'DO', ''],
    [{v:'DNM', f:'<a href="#"><a href="#">Director Nacional Mantenimiento</a><div style="color:red; font-style:italic">Mauricio Valencia</div>'}, 'DO', ''],
    [{v:'GIN', f:'<a href="#"><a href="#">Gerente Inteligencia de Negocio</a><div style="color:red; font-style:italic">Jorge Arriola</div>'}, 'DPM', ''],
    [{v:'GEC', f:'<a href="#"><a href="#">Gerente Estrategia Comercial</a><div style="color:red; font-style:italic">Fernando Flores</div>'}, 'DPM', ''],
    [{v:'GDNM', f:'<a href="#"><a href="#">Gerente Desarrollo Negocios MKT</a><div style="color:red; font-style:italic">Yoani Lorenzo</div>'}, 'DPM', ''],
    [{v:'GA1', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Guadalupe Duarte</div>'}, 'DA', ''],
    [{v:'GA2', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Ignacio Benitez</div>'}, 'DA', ''],
    [{v:'GA3', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">José Morales</div>'}, 'DA', ''],
    [{v:'GA4', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Isabel Butanda</div>'}, 'DA', ''],
    [{v:'GA5', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María de Jesús Loera</div>'}, 'DA', ''],
    [{v:'GA6', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María de Jesús Lira</div>'}, 'DA', ''],
    [{v:'GA7', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Obed López</div>'}, 'DA', ''],
    [{v:'GA8', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">Alejandro Pizaña</div>'}, 'DA', ''],
    [{v:'GA9', f:'<a href="#"><a href="#">Gerente Administrativo</a><div style="color:red; font-style:italic">María Guadalupe Bueno</div>'}, 'DA', ''],
    [{v:'GNAE', f:'<a href="#"><a href="#">Gerente Nacional de Activos Estratégicos</a><div style="color:red; font-style:italic">Alejandra Mendoza</div>'}, 'DA', ''],
    [{v:'GTI', f:'<a href="#"><a href="#">Gerente Tesorería</a><div style="color:red; font-style:italic">José Luis Arámbula</div>'}, 'DITR', ''],
    [{v:'GCC', f:'<a href="#"><a href="#">Gerente Capilla Cuernavaca</a><div style="color:red; font-style:italic">Ruben Navarro</div>'}, 'DRCVM', ''],
    [{v:'GCCS', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Sullivan</a><div style="color:red; font-style:italic">José Antonio Ruíz</div>'}, 'DRCVM', ''],
    [{v:'GCCC', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Colima</a><div style="color:red; font-style:italic">teresita de Jesús Gutiérrez</div>'}, 'DRCVM', ''],
    [{v:'GCCSM', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Santa Mónica</a><div style="color:red; font-style:italic">Rodolfo Vega</div>'}, 'DRCVM', ''],
    [{v:'GCCFC', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Félix Cuevas/LM</a><div style="color:red; font-style:italic">Patrick Hill</div>'}, 'DRCVM', ''],
    [{v:'GCVM', f:'<a href="#"><a href="#">Gerente Comercial Valle México</a><div style="color:red; font-style:italic">Teresa del Río</div>'}, 'DRCVM', ''],
    [{v:'GCCA', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Acapulco</a><div style="color:red; font-style:italic">José Luis Parra</div>'}, 'DRCVM', ''],
    [{v:'GCCAGS', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Aguascalientes</a><div style="color:red; font-style:italic">Isidro Villanueva</div>'}, 'DRCB', ''],
    [{v:'GCCG', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Guadalajara</a><div style="color:red; font-style:italic">Liliana Gutiérrez</div>'}, 'DRCB', ''],
    [{v:'GCCI', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Irapuato</a><div style="color:red; font-style:italic">Marina Carreón</div>'}, 'DRCB', ''],
    [{v:'GCCL', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios León</a><div style="color:red; font-style:italic">Verónica Navarrete</div>'}, 'DRCB', ''],
    [{v:'GCCM', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Morelia</a><div style="color:red; font-style:italic">Martín Huerta</div>'}, 'DRCB', ''],
    [{v:'GCCMTY', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Monterrey</a><div style="color:red; font-style:italic">Beatríz Becerril</div>'}, 'DRCB', ''],
    [{v:'GCCMXI', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Mexicali</a><div style="color:red; font-style:italic">Nora Andrade</div>'}, 'DRCN', ''],
    [{v:'GCCR', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Reynosa</a><div style="color:red; font-style:italic">Diana Cruz</div>'}, 'DRCN', ''],
    [{v:'GCCTIJ', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Tijuana</a><div style="color:red; font-style:italic">Abril Solis</div>'}, 'DRCN', ''],
    [{v:'GCCT', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Torreón</a><div style="color:red; font-style:italic">Aracely Contreras</div>'}, 'DRCN', ''],
    [{v:'DCCPT', f:'<a href="#"><a href="#">Director Convenios Corporativos</a><div style="color:red; font-style:italic">Roberto Valdez</div>'}, 'DRVM2', ''],
    [{v:'GCCT', f:'<a href="#"><a href="#">Gerente Capillas y Cementerios Torreón</a><div style="color:red; font-style:italic">Aracely Contreras</div>'}, 'DRVM2', ''],
    [{v:'DVPCA', f:'<a href="#"><a href="#">Director Ventas Previsión Canales Alternos</a><div style="color:red; font-style:italic">Yasmín Vedia</div>'}, 'DRVM2', ''],
    [{v:'DVPVM', f:'<a href="#"><a href="#">Director Ventas Previsión Del Valle</a><div style="color:red; font-style:italic">José Cisneros</div>'}, 'DRVM2', ''],
    [{v:'DVPP', f:'<a href="#"><a href="#">Director Ventas Previsión Poniente</a><div style="color:red; font-style:italic">Alberto Munguía</div>'}, 'DRVM2', ''],
    [{v:'DVPA', f:'<a href="#"><a href="#">Director Ventas Previsión Acapulco</a><div style="color:red; font-style:italic">Alma Marroquín</div>'}, 'DRVM1', ''],
    [{v:'DVPG', f:'<a href="#"><a href="#">Director Ventas Previsión Guardias</a><div style="color:red; font-style:italic">Nidia González</div>'}, 'DRVM1', ''],
    [{v:'DVPN', f:'<a href="#"><a href="#">Director Ventas Previsión Norte</a><div style="color:red; font-style:italic">Adriana Rosales</div>'}, 'DRVM1', ''],
    [{v:'DVPS', f:'<a href="#"><a href="#">Director Ventas Previsión Sur</a><div style="color:red; font-style:italic">Paula Alfaro</div>'}, 'DRVM1', ''],
    [{v:'GDV1', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Francisco Palacios</div>'}, 'DVPCA', ''],
    [{v:'GDV2', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Arturo González</div>'}, 'DVPCA', ''],
    [{v:'GDV3', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Yadira Ramírez</div>'}, 'DVPP', ''],
    [{v:'GDVM', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas/Módulos</a><div style="color:red; font-style:italic">Alfredo Carreón</div>'}, 'DVPG', ''],
    [{v:'GDV4', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Carlos Rodríguez</div>'}, 'DVPN', ''],
    [{v:'DVPGDL', f:'<a href="#"><a href="#">Director Ventas Previsión Guadalajara</a><div style="color:red; font-style:italic">Alberto Lomelí</div>'}, 'DRVPN', ''],
    [{v:'DVPMXI', f:'<a href="#"><a href="#">Director Ventas Previsión Mexicali</a><div style="color:red; font-style:italic">Álvaro Aldana</div>'}, 'DRVPN', ''],
    [{v:'DVPR', f:'<a href="#"><a href="#">Director Ventas Previsión Reynosa</a><div style="color:red; font-style:italic">Jorge Lucio</div>'}, 'DRVPN', ''],
    [{v:'DVPTIJ', f:'<a href="#"><a href="#">Director Ventas Previsión Tijuana</a><div style="color:red; font-style:italic">Alejandro Hernández</div>'}, 'DRVPN', ''],
    [{v:'DVPT', f:'<a href="#"><a href="#">Director Ventas Previsión Torreón</a><div style="color:red; font-style:italic">Alfredo Álvarez</div>'}, 'DRVPN', ''],
    [{v:'DVPAGS', f:'<a href="#"><a href="#">Director Ventas Previsión Aguascalientes</a><div style="color:red; font-style:italic">Mario Ayala</div>'}, 'DRVB', ''],
    [{v:'DVPL', f:'<a href="#"><a href="#">Director Ventas Previsión León</a><div style="color:red; font-style:italic">Alma Belmont</div>'}, 'DRVB', ''],
    [{v:'DVPI', f:'<a href="#"><a href="#">Director Ventas Previsión Irapuato</a><div style="color:red; font-style:italic">Jorge Luna</div>'}, 'DRVB', ''],
    [{v:'DVPMS', f:'<a href="#"><a href="#">Director Ventas Previsión Monterrey Zona Sur</a><div style="color:red; font-style:italic">Sandra Tapia</div>'}, 'DRVB', ''],
    [{v:'DVPMN', f:'<a href="#"><a href="#">Director Ventas Previsión Monterrey Zona Norte</a><div style="color:red; font-style:italic">Federico Montes de Oca</div>'}, 'DRVB', ''],
    [{v:'DVPM', f:'<a href="#"><a href="#">Director Ventas Previsión Morelia</a><div style="color:red; font-style:italic">Maria Venzor</div>'}, 'DRVB', ''],
    [{v:'GDVG', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas/Guardias</a><div style="color:red; font-style:italic">Sandra Pulido</div>'}, 'DVPG', ''],
    [{v:'GDV5', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Eduardo Huerta</div>'}, 'GDVG', ''],
    [{v:'GDV6', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Claudia Díaz</div>'}, 'GDVG', ''],
    [{v:'GDV7', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Lizbeth Negrete</div>'}, 'GDVG', ''],
    [{v:'GDV8', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Ericka Armeria</div>'}, 'GDVG', ''],
    [{v:'GDV9', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alfredo Álvarez</div>'}, 'GDVG', ''],
    [{v:'GDV10', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Ana García</div>'}, 'DVPTIJ', ''],
    [{v:'GDV11', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Diana Corral</div>'}, 'DVPTIJ', ''],
    [{v:'GDV12', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">María Piedra</div>'}, 'DVPTIJ', ''],
    [{v:'GDV13', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Juan González</div>'}, 'DVPTIJ', ''],
    [{v:'GDV14', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Marina Ríos</div>'}, 'DVPT', ''],
    [{v:'GDV15', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Fabiola Castruita</div>'}, 'DVPT', ''],
    [{v:'GDV16', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Daniel Martínez</div>'}, 'DVPMS', ''],
    [{v:'GDV17', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alejandro Espinosa</div>'}, 'DVPMS', ''],
    [{v:'GDV18', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Alma Benavides</div>'}, 'DVPMS', ''],
    [{v:'GDV19', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">María Wong</div>'}, 'DVPMN', ''],
    [{v:'GDV20', f:'<a href="#"><a href="#">Gerente Desarrollo de Ventas</a><div style="color:red; font-style:italic">Martha Álvarez</div>'}, 'DVPM', '']
  ]);

  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  var options = {allowHtml:true, allowCollapse: true};

  var viewRows = [0];
  var view = new google.visualization.DataView(data);
  view.setRows(viewRows);

  var selection = [];
  google.visualization.events.addListener(chart, 'select', function () {
    if (chart.getSelection().length > 0) {
      selection = chart.getSelection();
    }
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      if (data.getValue(i, 1) === data.getValue(selection[0].row, 0)) {
        if (viewRows.indexOf(i) === -1) {
          viewRows.push(i);
        } else {
          viewRows.splice(viewRows.indexOf(i), 1);
        }
      }
    }
    view.setRows(viewRows);
    chart.draw(view, options);
  });

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection(selection);
  });

  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • if you like this approach and can't get it to work, let me know and i'll try again when i have time... – WhiteHat Aug 30 '16 at 19:13
  • Hi, Your post gives good hints. I've posted my solution to the problem you mention with yours. Thank you as always, cheers! – cmill May 10 '23 at 14:48