Getting Started

System requirements

• FamilyTree JS 2 runs on any server that supports HTML. You can even run BALKAN FamilyTree JS 2 locally from a filesystem.
• FamilyTree JS 2 does not depend on any third party JavaScript library
• FamilyTree JS 2 works in all modern browsers and uses SVG for the graphics rendering

Installation

 
       Copy 
<script src="https://cdn.balkan.app/familytree2.js"></script>
             

Your first Family Tree JS project

With Family Tree JS 2 included in your webpage you are ready to create your first Family Tree.

1. Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your Family Tree.

                  Copy 
           <div id="tree"></div>
            

2. Add script tags anywhere in a webpage, containing the following code:

                  Copy 
       <script>
       let familyTree = new FamilyTree2(document.getElementById('tree'));
   
       familyTree.addFamilyMembers([
           { id: 1, fatherId: 2, motherId: 3, spouseIds: [4, 5], name: 'Me' },
           { id: 2, fatherId: 19, motherId: 18, name: 'Father' },
           { id: 3, fatherId: 17, motherId: 16, name: 'Mother' },
           { id: 4, name: 'Spouse 1' },
           { id: 5, fatherId: 12, motherId: 13, name: 'Spouse 2' },
           { id: 6, fatherId: 2, motherId: 3, name: 'Sibling 1' },
           { id: 7, fatherId: 2, motherId: 3, name: 'Sibling 2' },
           { id: 8, fatherId: 1, motherId: 4, name: 'Child 1' },
           { id: 9, fatherId: 1, motherId: 4, name: 'Child 2' },
           { id: 10, fatherId: 1, motherId: 4, name: 'Child 3' },
           { id: 11, fatherId: 1, motherId: 4, name: 'Child 4' },
           { id: 12, name: 'Father in Law' },
           { id: 13, name: 'Mother in Law' },
           { id: 14, fatherId: 17, motherId: 16, name: 'Uncle 1' },
           { id: 15, fatherId: 17, motherId: 16, name: 'Uncle 2' },
           { id: 16, name: 'Grandmother 1' },
           { id: 17, name: 'Grandfather 1' },
           { id: 18, name: 'Grandmother 2' },
           { id: 19, name: 'Grandfather 2' }
       ]).draw(1);
       </script>
    

3. You should now see the following Family Tree on your webpage:
   Edit in BALKAN Code
   
   

Where:

nodes is the data source. The 'id' property is mandatory.

motherId is the mother id.

fatherId is the father id.