Vertical Display of Leaves in Org Chart

orwant commented 9 years ago

What would you like to see us add to this API?

I would like to see the ability for the Org Chart to display leaf nodes
both horizontally and vertically.  Currently, the Org Chart only supports
horizontal layout.  But to save space (especially for printing), it would
be nice if the leaf nodes (nodes without children) would all display
directly below their parent with their connector line attaching to the box
on the left side.

What component is this issue related to (PieChart, LineChart, DataTable,
Query, etc)?

Org Chart

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by khenneman on 2009-09-08 18:15:40

orwant commented 9 years ago

I would suggest alternative Jquery graph plugins that support the vertical org chart
 function, there a lot out there that are way better than googles chart api. Google
just isn't interested.

Original issue reported on code.google.com by jarred363 on 2014-10-09 06:48:31

orwant commented 9 years ago

Wow, five years without this adjustment, Google is losing space.

Original issue reported on code.google.com by fabiowebgraphic on 2015-01-27 15:31:44

orwant commented 9 years ago

Solved mine issue with yEd editor

Original issue reported on code.google.com by vaclavblazej1 on 2015-01-27 15:49:54

orwant commented 9 years ago

This is also a challenge for us with a large organization.

Original issue reported on code.google.com by erpconsultingdotcom on 2015-04-27 15:09:01

orwant commented 9 years ago

This is also a challenge for us with a large organization.

Original issue reported on code.google.com by erpconsultingdotcom on 2015-04-27 15:09:02

samuvk commented 8 years ago

I would like to know more about how making the chart posted in one of the comments and where can I see more info on j.saterf and how to make this possible?

Thanks

MiroslawSlanda commented 8 years ago

  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:'U.1', f:'Oliver'},'', ''],
      [{v:'U.2', f:'Jack'},'U.1', ''],
      [{v:'U.3', f:'Noah'}, 'U.2', ''],
      [{v:'G.1', f:'<div data-group="G.1"></div>'}, 'U.2', ''],
      [{v:'U.5', f:'Jacob'}, 'U.3', ''],
      [{v:'U.6', f:'Charlie'}, 'U.1', '']
    ]);

    var nodes = [
            [{v:'U.7', f:'<div>Harry</div>'}, 'G.1', ''],
        [{v:'U.8', f:'<div>Joshua</div>'}, 'G.1', ''],
        [{v:'U.9', f:'<div>James</div>'}, 'G.1', ''],
        [{v:'U.10', f:'<div>Ethan</div>'}, 'G.1', '']
      ];

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

    $("div[data-group]").each(function ()
        {
            var parent = $(this).parent();
    $(this).css('position', 'absolute');
    $(this).css('padding-top', '0');
            parent.removeClass("google-visualization-orgchart-node");
            parent.removeClass("google-visualization-orgchart-node-medium");
    parent.css('vertical-align', 'top');
            parent.css('min-width', '120px');
            parent.css('vertical-align', 'top');
    parent.css('padding-top', '0');

    var group = $(this).data('group');
            if(group !== undefined) 
            {
      for(var i=0; i < nodes.length; i++)
                {
        var node = nodes[i];
        if(node[1] === group) 
        {
            $(this).append(node[0].f); 
        }
                }
      $('div', this).addClass("google-visualization-orgchart-node");
      $('div', this).addClass("google-visualization-orgchart-node-medium");
      $('div', this).css('margin-bottom','5px');
            $('div', this).css('width', '100px');
            }
        });

  }

MiroslawSlanda commented 8 years ago

This is example: http://plnkr.co/edit/bjKmAf1kGdAv3VcKJb8h

lalli-oni commented 8 years ago

Very interested in this enhancement. Great tool, just needs a bit more control options.

jmrichardson commented 7 years ago

I would love to see this enhancement.

haarabi commented 7 years ago

Can we receive an update on this long running request?

rohithkd commented 7 years ago

With a bit more control for vertical display, if this enhancement is made, org chart will become great.

michaelkah commented 7 years ago

+1 from me

sheepworrier commented 6 years ago

+1 from me

FrostTheFox commented 5 years ago

+1, Please add this enhancement, org charts for organizations with many high level leads are not practical in the horizontal form.

georgeslanglois commented 5 years ago

+1 from me too

ChaoTingChen commented 4 years ago

+1 from me

jankibhatt17 commented 3 years ago

i have 238 nodes and i face same problem, please suggest if anyone found solution

snowshoes commented 3 years ago

+1 after 6 years...

ghost commented 3 years ago

+1

Disconn commented 3 years ago

+1

fiore42 commented 3 years ago

+1 Not sure how the current org chart can be used for real organisations

milanbog92 commented 3 years ago

+1

venkatsamuthiram commented 3 years ago

I am using Google Org chat my project, Yes, Verical Display of leaves have issue, I have 500+ Node I am also facing same problem of org chat broken,

 return [
        {
              v: `Linked Under ${row.code}`,
              f: `Linked Under ${row.code}<div style="color:blue; font-style:italic">${row.details}</div>`,
       },
       `${row.code}`,
       'Account Details',
 ]