Make your Family Tree with Google Visualization API

Ever wanted to build your family tree ? Hell I did, cuz I have records of last 10 generations (Yes, I’m not kidding). The list was maintained by my Grandfather who handed to my father some 15 years ago. Sounds filmy, huh ? Anyways, as we had that in pen and paper, i wanted to make program that generates it. I started JavaScript in late 1998 and in 2002 I wrote a script [only for IE 🙁 at that time ] which shows a family tree and the DB is easily updated from the source. You can run the script downloading from here. I just checked it in IE and it seems to be working still after 8 years.

Yesterday, I was just browsing Google charts and visualization libraries to see if there’s any new thing since I saw them last time. And I saw this organization chart which can be used to build the family tree. So i just wanted to see how our 10 generations’ family looks like when putting them in Google’s visualization library. And it came out a really big horizontal one as you can see below.
Mahbub - Family Tree

Now, you can simply make your family tree using this API. It’s dead simple. Just see the couple of lines of code which is pretty self explanatory. I’m putting a little light here for easy understanding. So go and have fun creating your family tree and show it to your elderly persons, they might be happy seeing it.

To get started, just start with the sample code Google is providing here . http://code.google.com/apis/visualization/documentation/gallery/orgchart.html#Example

And if you look at how the database is being constructed, it’s very simple. For my BIG table i had the staring point like this

data.addRows([
[‘Kalu Khan’,”,’1570′],
[‘Ahsan Khan’, ‘Kalu Khan’, ”],
[‘Jharu Khan’, ‘Kalu Khan’, ”],
[‘Ajmat’, ‘Ahsan Khan’, ”],

]);

It means Kalu Khan is the root. The second Parameter is left blank which means it doesn’t have parent. Next you have to add Children node to it. The first parameter is the Children Name and second one is the Parent Name.

[‘Ahsan Khan’, ‘Kalu Khan’, ”]        ——–    Here Ahsan Khan is the Children and ‘Kalu Khan’ is the parent. So just make the list for your family and save for next generations 🙂

Oh, there’re some other options there as well like collapse / un-collapse and styling those nodes. Keep discovering..

And you can also see my 10 generations family db — mahbub-family-tree.

Author's gravatar

Md. Mahbubur Rahman

17 thoughts on “Make your Family Tree with Google Visualization API

    Author's gravatar

    Cool!

    I wish I had these types of extended information of Family Tree.
    My one will end in just 3 layer. Although, my father may have more
    info. I’ll ask him.

    Hope our next generation will have them.

    Author's gravatar

    Salam bro !

    I also have family tree but unable to put on my site need some help.

    Is this also support arabic language ?

    Author's gravatar

    thanks for the great solution, but except internet explorer, its working properly.

    in firefox it does not show the tree any how and search box does not show proper results.

    while in opera search does not open.

    I have also tried in many ways, but could not get the solution.

    so its humbly request to you to solve the browser compatibility issues.

    but except of those issues, great great great effort and thanks for sharing the solution.

    Author's gravatar

    we always keep track of our family tree because it is exciting to know the family tree *;`

    Author's gravatar

    Thank you. I’ve been looking for a solution like this for 2 years.
    Thanks for sharing 😉

    Author's gravatar

    شكرا لكم على هذا العمل الرائع
    مشكوررررررررررررررررررررررررررررررررررررررررررررررررر

    Author's gravatar

    Thanks for the info. Two more things. 1) Your family tree doesn’t show the wives, only the offsprings. Can you please do code so that the husband and wife will show above the offsprings? 2) I haven’t experimented yet, but it will be appreciated if you can give instructions how to embed the OrgChart API to my Google site.

    Thanks a lot!

    Author's gravatar

    Hello,

    Nice job done Mahbub!! It would have been even great if you have generated a family tree with partners/wives code. Hopefully you will also do this soon!!!

    Thanks,
    Swapnil

    Author's gravatar

    What if you found the information for Kula Kahns mother and father, how would you add them to the top since you would have 2 sources leading to the first? I like these but many times you want to chart a family starting with a grandfather. You need to show all of those before him and since and it would not start with a single record at the top.

    Author's gravatar

    @Mickey : Same issue was discusses earlier by James and as you can see from my response that the current API doesn’t support to add two parent nodes. For that we have write our own Family Tree script 🙂

    Author's gravatar

    Excellent! I was looking for something like this for sometime. Visualizer is awesome. 🙂 Thanks again.

    Author's gravatar

    I see a basic flaw out here. A family tree will have two parents (father/mother), how is it depicted?

Your email address will not be published. Required fields are marked *