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

Category: Chart & Graph , Javascript | June 8, 2015
Author:wamacdonald89
Views Total:24,487 views
Official Page:Go to website
Last Update:June 8, 2015
License:MIT

Preview:

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

Description:

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"));
}

You Might Be Interested In:


2 thoughts on “Create A Family / Organization Tree Using JavaScript and Canvas – ftree.js

  1. Bergström

    Excellent work! Question: How do I populate the ‘Last Name’ field with relevant data? In this version that text ( Tangaryen ) is static…

    Reply
  2. Thuong Nguyen

    Thank you!
    How to scroll canvas when i add more child

    Reply

Leave a Reply