Hide Parent Level in OrgChart

145 views

Skip to first unread message

Ruth C

unread,

Jul 12, 2017, 1:11:41 PM7/12/17

to Google Visualization API

Could I hide box to Different Levels and show your childs?.

For the next Eg.

Parent Level (GT034) has hide and Child (AA014) Level has show?

Should it Will Be Possible in google.visualization.OrgChart Chart?

I hope their tips show me how to I will make.

And Thanks In Advance

<html>

<head>

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:'BRIONES VALLEJO,VICTOR MANUEL<div style="color:blue; font-style:italic">SUBDIR. COM. DE PETROLEO CRUDO</div>'},'', '0'],

[{v:'SG001', f:'<div style="color:blue; font-style:italic">SUBGTE. INTELIGENCIA MERCADOS</div>'},'SD001', '1'],

[{v:'GT002', f:'HERNANDEZ MUÑOZ,MARIA EUGENIA<div style="color:blue; font-style:italic">GTE. DE RELACIONES COMERCIALES</div>'},'SD001', '1'],

[{v:'GT034', f:'<div style="color:blue; font-style:italic">GTE. DE VENTAS CONTRACTUALES</div>'},'SD001', '1'],

[{v:'AA014', f:'ALFARO DE LOS SANTOS,ALAN EDMUNDO<div style="color:blue; font-style:italic">ANALISTA A</div>'},'GT034', '2'],

[{v:'AA026', f:'CHIMAL CRUZ,FABIOLA<div style="color:blue; font-style:italic">ANALISTA A</div>'},'GT002', '2'],

[{v:'SG002', f:'MORALES SANTIAGO,VIOLETA SOFIA<div style="color:blue; font-style:italic">SUBGTE. RELACIONES COMERCIALES</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>

</head>

<body>

<button type="button" id="hideSales" >Hide Sales</button>

</body>

</html>

Reply all

Reply to author

Forward

0 new messages