GetOrgChart: How to allign top level boxes and make orgchart grow down

Question

How can i achieve the following layout using GetOrgChart when displaying org chart on a browser. This will help long org charts to grow down (seen by scrolling) but allow the root nodes ( heads of the organization) to always be initially visible.

Answer 1

GetOrgChart has released v1.2 which supports this orientation in their API.

getOrgChart.RO_LEFT_PARENT_TOP

Answer 2

GetOrgChart has eight orientation options. You can read the following blog post and online demo

Answer 3

Try this:

<script type="text/ecmascript">
        function redrawChart (){
            $("#people").getOrgChart({  
                scale: 1,
                primaryColumns: ["name", "title", "phone", "mail"],
                imageColumn: "image",
                orientation: parseInt($("input[name=orientation]:checked").val()),
                dataSource: [ 
                    { id: 1, parentId: "", name: "Mary D. Barnes", title: "Founder", phone: "765-386-5597", image: "images/f-57.jpg" },
                    { id: 2, parentId: 1, name: "Larry B. Welborn", title: "Podiatrist", phone: "516-922-7920", image: "images/f-56.jpg" },
                    { id: 3, parentId: 1, name: "John D. Blakely", title: "Ballet master", phone: "617-361-4327", mail: "john.blakely@dom.com" },
                    { id: 4, parentId: 1, name: "Megan F. Borg", title: "Botanist", phone: "205-324-9284", image: "images/f-54.jpg" }
                ]
            });
        }

        redrawChart();

        $("input[name=orientation]").on("click", redrawChart);
</script>