Pages

Draw hierarchical tree in html using organizational chart control

Few years back, I created multilevel marketing web application and one of the obvious requirements was to display customer network that included its sponsor as well as the customers who were sponsored by that customer. In other words, this was nothing but to display hierarchical data in a tree format on a web page.

I still remember how much I struggled back then to do it (honestly, I didn't put much efforts searching how it can be done). Finally I had to settle down on displaying data in tabular format with separate table (html) for each level not to mention it was such a pain :((

Recently, whilst answering (well, trying to answer :p) few questions in forums I saw one of the guys asking for the same thing. So out of curiosity I finally started Googling for this one and to my surprise it did not help much. :o. Finally, somehow I got a link to Google Charts JavaScript API and the good news is Google has created a control for it, they call it Organizational Chart. I immediately decided to blog on that one, hoping it would save someone's efforts and most importantly time (as it did mine, I had actually started writing some C# code, meanwhile got to know about this awesome control. Its awesome because you really don't need to do anything much, just pass an array of nodes and call one method from API).

Here's how you use it. Simply copy paste the following code:
 <html>  
  <head>  
   <script type='text/javascript' src='https://www.google.com/jsapi'></script>  
   <script type='text/javascript'>  
    google.load('visualization', '1', {packages:['orgchart']});  
    google.setOnLoadCallback(drawChart);  
    function drawChart() {  
     var data = new google.visualization.DataTable();  
     data.addColumn('string', 'Node');  
     data.addColumn('string', 'Parent');  
     data.addRows([  
      ['1', ''],  
      ['1.1', '1'],  
      ['1.2', '1'],  
      ['1.1.1', '1.1'],  
      ['1.1.2', '1.1'],  
      ['1.1.3', '1.1'],  
      ['1.2.1', '1.2'],  
      ['1.2.2', '1.2'],  
      ['1.1.1.1', '1.1.1'],  
      ['1.1.1.2', '1.1.1'],  
      ['1.1.3.1', '1.1.3'],  
      ['1.2.2.1', '1.2.2'],  
      ['1.2.2.2', '1.2.2']  
     ]);  
     var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));  
     chart.draw(data);  
    }  
   </script>  
  </head>  
  <body>  
   <div id='chart_div'></div>  
  </body>  
 </html>  
View the page in browser and here's what you will see:


Now, this looks pretty OK as a sample. In real scenarios you would want to fetch data from database and display it. For that you will have to first use jQuery AJAX and get data in drawChart method and then add rows to data table.

This post just shows basic things you need to do to draw tree using organizational chart API but there's lot more you can do with it like customizations, event handling, additional methods, styling etc. Refer the following link for complete information on the API.

https://developers.google.com/chart/interactive/docs/gallery/orgchart

--- 

14 comments:

  1. Do you have to be online in order to view the chart?

    ReplyDelete
    Replies
    1. No, AFAIK you can simply hit 'https://www.google.com/jsapi' and save the response as JS file. Thereafter you can refer this js file from wherever you have stored it.

      Delete
  2. how to create this tree with the help of MySql data?? can you show us???

    ReplyDelete
    Replies
    1. Step 1 - Write code to fetch data from MySql/Any data source. Create a php/aspx etc. page, for that purpose.
      Step 2 - Then use that page to return data using ajax from the above code.

      For ready-made/advanced usage, you need server side web controls like Chart4.NET (commercial)

      Delete
  3. To view charts online you will have to find a org chart online tool that is available for showing without login, like creately

    ReplyDelete
  4. i want this tree using mysql/databse in php....plzzz someone help me....

    ReplyDelete
  5. i need to draw tree like this using mysql/database in php..someone help me...pllzzzzzz

    ReplyDelete
  6. This is really awesome just want to check are we downloading the api and building the chart or its online service where it take my data to online and build the chart since my data has sensitivity

    ReplyDelete
    Replies
    1. Everything is client side, no data is uploaded. I had the same issue, checked Google visualisation and it clearly states nothing is uploaded.

      Delete
  7. Which file format do I have to save it?

    ReplyDelete
  8. how to insert pictures into the block

    ReplyDelete