I would like to design a family tree on my website. How can this be done with jQuery or Ajax? Any animated examples out there?
-
1Let this be a call to action. JQFamTree! Let thee be! – karim79 Aug 10 '10 at 23:49
-
if you are interested in genealogy, be aware there is move to start up a genealogy SE Q&A. Help it reach beta: http://area51.stackexchange.com/proposals/43502/genealogy-family-history?referrer=DIRpC-2QEpSJcDcQkP0RAg2 – Duncan Sep 23 '12 at 12:43
5 Answers
Use the Google Visualization API, it's well documented: http://code.google.com/apis/visualization/documentation/gallery/orgchart.html#Example
-
with Google Visualization API, can we have a Pop-Up on each of the node which would give more details about that node, either on mouse-over or on a click. – Pratik May 23 '11 at 09:32
-
2It seems that nodes can only be "one-to-may". You cannot be related with two parents – Ludovico Grossi Mar 12 '16 at 20:23
The following link will be helpful to share here as i applied every logic mentioned here but none works. at last i found this solution. It helped me build professional family tree via jquery and php

- 6,533
- 7
- 38
- 53
Check www.geni.com. They use Flash, not JavaScript, but it's nice, animated and so on.

- 30,738
- 21
- 105
- 131

- 28,542
- 5
- 55
- 68
A quick look at the jQuery plugin site turned up Arrows & Boxes. It looks like it does what you need. If this one doesn't work out, there are probably a dozen others to try.

- 8,408
- 4
- 29
- 40
Have a look at my sample created using d3.js, mobile responsive.
- Mouse scroll to zoom, draggable, with interactive tooltip
- The 'Find' button to search any family member
- 'Reset' button to reset zoom & position
Able to display difficult relationships such as multiple marriages and marriages between family members. Created using d3.js

- 426
- 7
- 23