CODEWITHSUNDEEP
javascriptjsongoogle-apigoogle-visualization
M.Ghandour
M.Ghandour

Reputation: 93

Google Visualization Organizational Chart (Node Children)

I have an organizational chart with many levels, the image below is taken from a part of it. I try to get all the childs and sub childs of a selected node, like if "Power Business Unit" node selected it get all the 3 childs and for every single child do the same. I got the first level but I can't get the depth of the tree to provide the number of loops to reach the last child.

1- How can I get the last child in the chart? how to get the depth of the tree?

2- Is there a zoom in/zoom out toolbar or something, that I can add to the chart?

that is my code of drawing:

google.load('visualization', '1', { packages: ['table', 'orgchart'] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'NODE');
        data.addColumn('string', 'PARENT');
        data.addColumn('string', 'NODEID');

        data.addRows(JSON.parse(document.getElementById("<%=HiddenField1.ClientID%>").value));
        //
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

        function selectHandler() {
            var selectedItem = chart.getSelection()[0];
            if (selectedItem) {
                var oInd = data.getValue(selectedItem.row, 2);

                var arrLoop = chart.getChildrenIndexes(selectedItem.row);
                var arrConcat = chart.getChildrenIndexes(selectedItem.row);


                for (var i = 0; i < arrLoop.length; i++) {
                    var arr2 = new Array(chart.getChildrenIndexes(arrLoop[i]).length);
                    arr2 = chart.getChildrenIndexes(arrLoop[i]);
                    for (var j = 0; j < arr2.length; j++) {
                        arrConcat.push(arr2[j]);
                    }
                    arrConcat.concat(arr2);
                }

                var arrChilds = new Array(arrConcat.length);

                for (var i = 0; i < arrConcat.length; i++) {
                    arrChilds[i] = data.getValue(arrConcat[i], 2);
                }
                drawTable(oInd, arrChilds);
            }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);

        chart.draw(data, { allowHtml: true });

        //for (var i = 0; i < data.getNumberOfRows() ; i++) {
        //    chart.collapse(i, true);
        //}
    }

Google Organizational Chart

Upvotes: 0

Views: 3578

Answers (1)

juvian
juvian

Reputation: 16068

Not sure what you mean by last child in the chart. And this chart doesn't seem to support zoom, you may have to code it yourself or look into libraries. Regarding your problem of getting children and subchildren of selected, you need to deal with recursion:

    google.visualization.events.addListener(chart, 'select', function(){
          var children=[]
          var selected=chart.getSelection()[0].row;

          function getChilds(index){ // recursive function, adds children of index (row)
              var childs=chart.getChildrenIndexes(index); // get children indexes of current index
              for(var i = 0; i < childs.length;i++){ // for each children
                  children.push(data.getValue(childs[i],0)) // add the title
                  getChilds(childs[i]) // and call the function with this children index, to get their children and so on >> this is recursive
              }
          }

          getChilds(selected) // start recursive function with selected index
          console.log(children)

        })

Here is an example: http://jsfiddle.net/36gg3ro1/1/

Upvotes: 1

Related Questions