How can I hide a parent in an OrgChart?

Question

How can I hide a parent in an OrgChart?

Navigation

#1 by (0 votes)

1

Could someone help me and tell me how to hide the father and keep showing the son in an organizational chart.

Example: It is required to hide the father ('SG001') and continue showing the son ('AA014'), giving continuity to the line and leaving the child at the level that corresponds to him.

google.charts.load('current', {packages:["orgchart"]});
        google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
		data.addRows([
					[{v:'SD001', f:'EMBRIONES CALLEJO,V RICARDO<div style="color:blue; font-style:italic">SUBDIR. COM. DE PETS CONTROL</div>'},'', '0'],
					[{v:'SG001', f:'<div style="color:blue; font-style:italic">SUBGTE. INTELIGENCIA ARTIFICIAL</div>'},'SD001', '1'],
					[{v:'GT002', f:'HERNANDEZ,E<div style="color:blue; font-style:italic">GTE. DE RELACIONES</div>'},'SD001', '1'],
					[{v:'GT034', f:'<div style="color:blue; font-style:italic">GTE. DE VENTAS </div>'},'SD001', '1'],
					[{v:'AA014', f:'ALFAGUAROO ,ALAN <div style="color:blue; font-style:italic">ANALISTA A</div>'},'GT034', '2'],
					[{v:'AA026', f:'CRUZ,JULIA<div style="color:blue; font-style:italic">ANALISTA A</div>'},'GT002', '2'],
					[{v:'SG002', f:'MORALES ,AZUCENA <div style="color:blue; font-style:italic">SUBGTE. RELACIONES DIV</div>'},'GT002', '2']
		]);

		//data.setRowProperty(1, 'selectedStyle', 'background-color:#00FF00');
        //data.setProperty(0, 0, "style", "font-style:bold; font-size:22px;");
        //data.removeColumn(3);
        //data.setColumnProperty(1, name, value)
        data.setProperty(1, 1, 'style', 'background-color: red;');


		//var view = new google.visualization.DataView(data);
  		//view.setRows(data.getFilteredRows([
  		//  {column: 0, Value: SG001}
  		//]));


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


        function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 0);
            //data.removeColumn(selectedItem.row);
            //alert('The user selected ' + topping);
          }
        }
        google.visualization.events.addListener(chart, 'select', selectHandler);

        // Draw the chart, setting the allowHtml option to true for the tooltips.
        //chart.setView({columns: 1});
        chart.draw(data, {allowHtml:true, allowCollapse:true});
        //chart.hideColumns(4,false);
        chart.collapse(2,true);
        chart.collapse(3,true);
        chart.collapse(4,true);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button type="button" id="hideSales"  >Hide Sales</button>

javascript google-visualization chart.js

asked by Gustavo Suarez Muñoz 12.07.2017 в 20:24

source

1 answer

BD Oracle query by time segments serviceworker in universal angular

score 0 · Answer 1

As seen in the image, it is required that the positions are organized by rows, where each row corresponds to the level / type of position, operative bottom row, middle controls, middle row, top management, top row. I think that with Google's OrgChart it will not be easy, it is something that you experiment with the options indicated in the official documentation or that you use some "hacks" like superimposing an image that hides the post and connect the lines.

For example, you can use nodeClass to make the GTE box transparent using CSS. OF SALES. Where my main question arises is in drawing the line of the upper part with the lower part. Another option, already mentioned, is to put an image in such a way that it covers the GTE box. of SALES.