Search code examples
javascriptjqueryhtmlcssorgchart

Change Org chart orientation from Left to right

I need to change the orientation of the below Chart so that it displays from Left to Right rather than the current orientation of Top to bottom. Is it possible to do this by using row span instead of col span. In the Top to bottom approach its all done using col span so I was assuming that left to right could be done using row Span but I am unable to get a start.

enter image description here

My current code css is:

div.orgChart table {
    width                 : 100%;
}

div.orgChart tr.lines td.line {
    width                 : 1px;
    height                : 20px;
}

div.orgChart tr.lines td.top {
    border-top            : 1px solid black;    /*dashed*/
}

div.orgChart tr.lines td.left {
    border-right          : 1px solid black;
}

div.orgChart tr.lines td.right {
    border-left           : 0px solid black;
}

div.orgChart tr.lines td.half {
    width                 : 50%;
}


div.orgChart td {
    text-align            : center;
    vertical-align        : top;
    padding               : 0px 2px;
}

My Current Code in HTML body is:

<div id='orgChartContainer'>
<div id='orgChart' class='orgChart'>
<table id='myTable' cellpadding='0' cellspacing='0' border='0'>

<tr><td colspan='4'><div>node</div></td></tr>

<tr class='lines'><td colspan='4'>
<table cellpadding='0' cellspacing='0' border='0'><tr class='lines x'><td class='line left half'></td><td class='line right half'></td></table>
</td></tr>

<tr class='lines v'><td class='line left'></td><td class='line right top'></td><td class='line left top'></td><td class='line right'></td></tr>

<tr>
<td colspan='2'>
<table cellpadding='0' cellspacing='0' border='0'><tr><td colspan='2'><div>node 2</div></td></tr>
</table>
</td>
<td colspan='2'>
<table cellpadding='0' cellspacing='0' border='0'><tr><td colspan='2'><div>node 3</div></td></tr></table>
</td>

</tr>
</table>
</div>
</div>
Solution

  • I used d3.js library to develop my own organization charts. There are working examples to accomplish this using the Tree Layout in D3.