Create A Family / Organization Tree Using JavaScript and Canvas – ftree.js

ftree.js is a pure JavaScript library that enables you to render a family tree / organizational chart on an html5 canvas element.

How to use it:

Load the ftree.js in your project.

<script src="tree.js"></script>

Create an canvas element on the page.

<canvas id="canvas"></canvas>

Populate data into the family tree.

function populateDummyData(tree) {
    tree.selected(true);
    updatePage(tree);
    tree.addChild(TREE.create("Aerion"));
    tree.addChild(TREE.create("Daeron"));
    tree.addChild(TREE.create("Aemon"));
    tree.addChild(TREE.create("Aegon V"));
    tree.addChild(TREE.create("Rhae"));
    tree.addChild(TREE.create("Daella"));
    tree.getChildAt(0).addChild(TREE.create("Maegor"));
    tree.getChildAt(1).addChild(TREE.create("Vaella"));
    tree.getChildAt(3).addChild(TREE.create("Duncan"));
    tree.getChildAt(3).addChild(TREE.create("Jaehaerys II"));
    tree.getChildAt(3).addChild(TREE.create("Shaera"));
    tree.getChildAt(3).addChild(TREE.create("Daeron"));
    tree.getChildAt(3).addChild(TREE.create("Rhaelle"));
    tree.getDescendent(11).addChild(TREE.create("Aerys II"));
    tree.getDescendent(11).addChild(TREE.create("Rhaella"));
    tree.getDescendent(15).addChild(TREE.create("Rhaegar"));
    tree.getDescendent(15).addChild(TREE.create("Shaena"));
    tree.getDescendent(15).addChild(TREE.create("Daeron"));
    tree.getDescendent(15).addChild(TREE.create("Aegon"));
    tree.getDescendent(15).addChild(TREE.create("Jaehaerys"));
    tree.getDescendent(15).addChild(TREE.create("Viserys"));
    tree.getDescendent(15).addChild(TREE.create("Daenerys"));
    tree.getDescendent(17).addChild(TREE.create("Rhaenys"));
    tree.getDescendent(17).addChild(TREE.create("Aegon"));
    tree.getDescendent(23).addChild(TREE.create("Rhaego"));
}