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], 
               siblingIds: [5, 6], 
               childIds: [7],
               name: 'Me' 
           }, 
           {id: 2, name: 'Father'},
           {id: 3, name: 'Mother'},
           {id: 4, childIds: [7], name: 'Spouse'},
           {id: 5, name: 'Sibling 1'},
           {id: 6, name: 'Sibling 2'},
           {id: 7, name: 'Child'}
       ]).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.