图表关闭屏幕

时间:2016-08-29 21:20:59

标签: javascript html google-visualization

我有这个组织结构图太宽而且显示在屏幕外,用户可能认为页面是空白的,有没有办法让图表在加载时出现在屏幕的中心? 代码如下:

<!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>

1 个答案:

答案 0 :(得分:0)

这是我的尝试,它无法正常工作,但应该关闭 也许你可以让它工作

基本上,它使用DataView Class仅显示用户选择的行

这将图表仅限于CEO view.setRows([0]);

然后在'select'找到CEO的直接报告并显示/隐藏这些 view.setRows([0, 1, 2, 3, 4, 5, 6, 7]);

主要缺点是图表在展开/折叠时出现 jumpy (在'select'上)

要检查的内容 - &gt;点击首席执行官,然后是首席财务官,然后点击“导演deInccologologadeInformática - Isela Montenegro”

出现了一些东西并隐藏在右边,
但不要认为该节点应该有任何直接报告...

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>