Quick Easy Family Tree or Organization Chart Generator jQuery plugin

treeData.js is a simple-to-use JavaScript tree plugin to generate complex trees from hierarchical data. It provides a simple solution for developers to create interactive family trees, organization charts, and other tree-like diagrams.

Treedata.js implementation

To get started, include the JavaScript treeData.js and stylesheet treeData.min.css on the page.

Create an empty DIV container for the tree structure.

Prepare your hierarchical data in JS objects as follows:

    var treeData = {
         zelda : {value : "Zelda Timeline", parent : ""},
         a : {value : "Skyward Sword", parent : "zelda"},
         b : {value : "The Minish Cap", parent : "a"},
         c : {value : "Four Swords", parent : "b"},
         d : {value : "Ocarina of Time", parent : "c"},
         e : {value : "A link to Past", parent : "d"},
         f : {value : "Oracle of Seasons & Oracle of Ages", parent : "e"},
         g : {value : "Link's Awakening", parent : "f"},
         h : {value : "The Legend of Zelda", parent : "g"},
         i : {value : "Adventure of Link", parent : "h"},
         j : {value : "Majora's Mask", parent : "d"},
         k : {value : "Twilight Princess", parent : "j"},
         l : {value : "Four Swords", parent : "k"},
         m : {value : "The Wind Waker", parent : "d"},
         n : {value : "Phanthom Hourglass", parent : "m"},
         o : {value : "Spirit Tracks", parent : "n"}
    };
    //Generate a tree from the data you provide.
    TreeData(tree, "#tree");