JavaScript organization chart without waste gaps between nodes
<p>I want to make an organization tree by using JavaScript. The tree is needed a function toggle display nodes by clicking. 
I found some usefull libralies below.</p>

<p>1.jQuery Org Chart</p>

<p><a href="http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/" rel="nofollow">http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/</a></p>

<p>2.Visualization: Organizational Chart
<a href="http://code.google.com/apis/chart/interactive/docs/gallery/orgchart.html" rel="nofollow">http://code.google.com/apis/chart/interactive/docs/gallery/orgchart.html</a></p>

<p>3.SharePoint Org Chart</p>

<p><a href="http://www.thesanitypoint.com/archive/2009/11/11/a-free-sharepoint-org-chart-web-part.aspx" rel="nofollow">http://www.thesanitypoint.com/archive/2009/11/11/a-free-sharepoint-org-chart-web-part.aspx</a></p>

<p>Libraries of No1 and No2 meet almost my demands but just one thing does not.</p>

<p>Please take a look at the pic below, as you can see there is a gap between [Fruit] and [Bread] due to consider under hierarchies. Doing this leads to over expand width which is not acceptable for me.</p>

<p>On the other hand, an image in [3.SharePoint Org Chart] does not have waste blanks between nodes. I would like to make like this. (unfortunately, this is not JavaScript..)</p>

<p>Does anyone know any libraries satisfied my demand or how to customize above libraries. Any help will be appreciated.</p>

<p><img src="http://i.stack.imgur.com/EZTmH.png" alt="enter image description here"></p>
