2.0.166 • Published 5 months ago

@balkangraph/familytree2.js v2.0.166

Weekly downloads
-
License
SEE LICENSE IN ht...
Repository
github
Last release
5 months ago

FamilyTree JS 2 FamilyTree JS 2

Build family tree app with BALKAN FamilyTree JS 2 JavaScript library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure.

Overvew Image

Demos      Docs      Download      Support

Features

  • Supports both local data and remote data (JSON)
  • Smooth expand/collapse effects
  • Supports pan and zoom
  • Edit Form
  • Node Customization
  • Node Focus
  • Loading on demand

Installation

Getting Started

Usage

  1. Include the online link to your project (or an empty HTML file):
<script src="https://cdn.balkan.app/familytree2.js"></script>
  1. Add a div element to your webpage where the organizational chart will be rendered:
<div id="tree"></div>

You can set a specific width and height for the div to define the size of your chart.

  1. Add script tags to your webpage and include the following code to initialize the chart:
<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>

Here is the result: My First Family Tree

1 click to talk 2 us

OrgChart

2.0.166

5 months ago

2.0.165

5 months ago

2.0.164

6 months ago

2.0.163

6 months ago

2.0.162

6 months ago

2.0.161

6 months ago

2.0.160

6 months ago

2.0.159

6 months ago

2.0.158

6 months ago

2.0.157

6 months ago

2.0.156

6 months ago

2.0.155

6 months ago

2.0.154

6 months ago

2.0.152

6 months ago

2.0.151

6 months ago

2.0.150

6 months ago

2.0.149

6 months ago

2.0.148

6 months ago

2.0.147

6 months ago

2.0.146

6 months ago

2.0.145

6 months ago

2.0.144

6 months ago

2.0.143

7 months ago

2.0.142

7 months ago

2.0.141

7 months ago

2.0.140

7 months ago

2.0.139

7 months ago

2.0.138

7 months ago

2.0.137

7 months ago

2.0.136

7 months ago

2.0.135

7 months ago

2.0.133

7 months ago

2.0.131

7 months ago

2.0.130

7 months ago

2.0.129

7 months ago

2.0.128

7 months ago

2.0.127

7 months ago

2.0.126

7 months ago

2.0.125

7 months ago

2.0.124

7 months ago

2.0.123

7 months ago

2.0.122

7 months ago

2.0.121

7 months ago

2.0.120

7 months ago

2.0.119

7 months ago

2.0.118

7 months ago

2.0.116

7 months ago

2.0.115

8 months ago

2.0.114

8 months ago

2.0.113

8 months ago

2.0.112

8 months ago

2.0.111

8 months ago

2.0.110

8 months ago

2.0.106

8 months ago

2.0.105

8 months ago

2.0.104

8 months ago

2.0.103

8 months ago

2.0.102

8 months ago

2.0.101

8 months ago

2.0.100

8 months ago

2.0.99

8 months ago

2.0.98

8 months ago

2.0.97

8 months ago

2.0.96

8 months ago

2.0.94

8 months ago

2.0.93

8 months ago

2.0.92

8 months ago