@balkangraph/familytree2.js
Version:
Build family tree app with BALKAN FamilyTree JS library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure.
68 lines (51 loc) • 2.27 kB
Markdown
#  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.
## [Demos](https://balkan.app/FamilyTreeJS2/Demos/) [Docs](https://balkan.app/FamilyTreeJS2/Docs/GettingStarted) [Download](https://balkan.app/FamilyTreeJS2/Download) [Support](https://balkan.app/FamilyTreeJS2/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](https://balkan.app/FamilyTreeJS2/Docs/GettingStarted)
## Usage
1. Include the online link to your project (or an empty HTML file):
```html
<script src="https://cdn.balkan.app/familytree2.js"></script>
```
2. Add a div element to your webpage where the organizational chart will be rendered:
```html
<div id="tree"></div>
```
You can set a specific width and height for the div to define the size of your chart.
3. Add script tags to your webpage and include the following code to initialize the chart:
```js
<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](https://code.balkan.app/family-tree-js-2/getting-started)
## 1 click to talk 2 us
[](https://webcall.me/BALKANGraph)