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.