This project is read-only.
This is an example for quick reference to show Org with name only:
   <script src="Scripts/orgchart.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function (e) {
            var list = "[{id:'1',pid:'0', name:'Root', color:'red'},{id:'2',pid:'1', name:'Left', color:'green'},{id:'3',pid:'1', name:'Right', color:'green'}]";
            if (list != "") {
                var data = eval(list);
                var orgchart = new OrgChart("chart");
                Utility.Each(data, function (o) {
                    orgchart.Push(new Cube(o.id, o.pid, {n:o.name, c:o.color}));
                    return null;
                });
                orgchart.NodeClick = function (id) {
                    alert("ID:" + id);
                };
                orgchart.Draw();
            }
        });
    </script>
This is advanced example to display Picture and text lines for each Node, Enable search button on each Node.
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var orgchart = new OrgChart('chart');
            Utility.ImageDimen = { width: 70, height: 70 };
            orgchart.Push(new Cube(1, 0, { n: "1", c: 'blue', i: { src: 'images/a.jpg', text: ['Steve (alias)''CEO''425-666-9999']} }));
            orgchart.Push(new Cube(2, 1, { n: "2", c: 'red', i: { src: 'images/b.jpg', text: ['Bill (alias)''President''425-666-8888']} }));
            orgchart.Push(new Cube(4, 2, { n: "3", c: 'blue', i: { src: 'images/c.jpg', text: ['James (alias)''CVP''425-666-7777']} }));
            orgchart.Push(new Cube(3, 2, { n: "4", c: 'blue', i: { src: 'images/d.jpg', text: ['Shawn (alias)''SVP''425-666-6666']} }));
            orgchart.Push(new Cube(5, 2, { n: "5", c: 'blue', i: { src: 'images/e.jpg', text: ['Jay (alias)''VP''425-666-3333']} }));
            orgchart.Push(new Cube(6, 4, { n: "6", c: 'blue', i: { src: 'images/f.jpg'} }));
            orgchart.NodeClick = function (id) {
                alert('click:' + id);
            };
            orgchart.NodeSearch = function (id) {
                alert('search:' + id);
            };
            orgchart.Draw();
        });
    </script>

Last edited Feb 10, 2012 at 7:23 PM by shawncao, version 5

Comments

shawncao Dec 11, 2012 at 6:39 AM 
yeah, you might need to set the meta header to tell the browser to render HTML5 content.
try to add this to your header:
<meta http-equiv="X-UA-Compatible" content="IE=EDGE;FF=3" />

dodo86 Mar 7, 2012 at 1:52 PM 
it works fine on chrome but it's not displayed on IE and firefox

have i forget to do something?