Organization/Hierarchy Chart on SharePoint (using jquery, Javascipt-CSOM)

Posted on Updated on

Hi developers,

This time I have a very interesting stuff for you guys. Few days back I got a tricky requirement from one of my customers , its about populating their organizational structure dynamically on their  SharePoint Intranet site without any server side components /Code. Means – there will be a SharePoint list from where data will  be pulled and on a Webpart(CEWP or OOB WP) the hierarchy need to be displayed. Fortunately within few hours I was able to integrate 2-3 things with some javascript / jquery code to accomplish this requirement.  Things require to cook out are

  • jQuery
  • jQuery OrgChart PlugIn  – Kindly read the technical artifacts of jQuery OrgChart from this location.
  • Content Editor WebPart
  • SharePoint Javascript CSOM
  • a SharePoint list
  • jQuery Balloon Plug In – If need to show any additional data

The scenario, I am going to demonstrate here is  to create a corporate organizational structure. For example, CEO on the top then COO, CFO, CTO  then Excutive VPs, AVPs then comes Directors,Managers  after that core execution team.

So, Here we start.

1. Create a custom SharePoint list having  columns like Title, Manager, Designation .Enter some logical details as mentioned below.

List data for populating Org Chart

 

 

 

 

 

 

 

 

 

2. Download and place Jquery & jQuery OrgChart plug-in files into the hive’s _layouts folder(see image below).Note : When we  are going through a solution deployment approach we need to place these files inside SP Project to package it to a WSP file.  Here we are directly copying files to _layouts folder just for the sake of demo. If needed you can place the jQuery Balloon file too.

jqueryPlugInFiles

 

 

 

 

 

 

3.Creating the Content Editor WebPart / Script editor WP – Script source file. Save the below mentioned code to a txt file and upload it to the SiteAssets Library. Give the path of the file to CEWP  like  “/SiteAssets/ScriptstxtFile.txt” or directly use this script to your client component.

<link rel="stylesheet" href="_layouts/jquery.orgchart.css" /></pre>
<link rel="stylesheet" href="_layouts/jquery-ui-1.10.3.custom.css" />

<script src="_layouts/jquery-1.9.1.js"></script>
<script src="_layouts/jquery-ui-1.10.3.custom.js"></script>
<script src="_layouts/jquery.orgchart.js"></script>
<script src="_layouts/jquery.balloon.js"></script>

<!--This div will be populated with the <ul><li> structure from the SCOM returned objects-->
<div id="left">
</div>
<style>
 div.node.bladerunner {
 background-color: #a4a0d9 !important;
 }

div.node.replicant {
 background-color: #d9ada0 !important;
 }

div.node.deceased {
 background-color: #d9d2a0 !important;
 text-decoration: line-through;
 }

div.node.retired {
 background-color: #d9c0a0 !important;
 text-decoration: line-through;
 }
</style>

<!--Main Org Structure will pupulate under this DIV-->
<div id="content">
 <div id="main">
 </div>
</div>

<script type="text/javascript">

//loading SharePoint Javascript SCOM
 ExecuteOrDelayUntilScriptLoaded(loadStructure, "sp.js");

//calling the executing function
 function loadStructure() {

//Querying SP using SCOM
 var context = new SP.ClientContext.get_current();
 var web = context.get_web();
 var list = web.get_lists().getByTitle("Employee"); //Employee is SP List containing heirarchy data of the Orgnization
 var viewXml = '<View><RowLimit>1200</RowLimit></View>';
 var query = new SP.CamlQuery();
 query.set_viewXml(viewXml);
 this.items = list.getItems(query);
 context.load(items, 'Include(Title, Manager,Designation)');
 context.add_requestSucceeded(onLoaded);
 context.add_requestFailed(onFailure);
 context.executeQueryAsync();

function onLoaded() {
 //Adding SCOM return objects to an array
 var tasksEntries = [];
 var itemsCount = items.get_count();
 for (i = 0; i < itemsCount; i++) {
 var item = items.itemAt(i);
 var taskEntry = item.get_fieldValues();
 tasksEntries.push(taskEntry);
 }
 //array's filter function wont work in IE8. Hence GetChildArrayObjects
 //var topHead = tasksEntries.filter(function (item) { return (item.Manager == null) });
 var topHead = GetChildArrayObjects(tasksEntries, null);

/////Logic to create <ul><li>....</li></ul> for jQuery orgChart -- ####Starts Here
 var headName = topHead[0].Title;

var title = topHead[0].Designation + ", Manager :" + topHead[0].Manager;

var listString = "<ul id='organisation'><li class='hide' title='" + headName + "'>" + headName;

//Calling the recursive function.getChildNodes
 var childliststring = getChildNodes(tasksEntries, headName, listString);

listString = childliststring + "</li></ul>";

var divForList = document.getElementById('left');
 divForList.innerHTML = listString;
 /////Logic to create <ul><li>....</li></ul> for jQuery orgChart -- ####Ends Here

//Populating OrgChart using Jquery OrgChart Plug in - Basically it reads Created <ul><li> list named 'organisation' and writes a TABLE - DIV structure.
 $("#organisation").orgChart({ container: $("#main"), nodeClicked: onChartNodeClicked });

//enabling balloon for each orgchart block
 for (var i = 0; i < tasksEntries.length; i++) {

$("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({
 contents: '<img src ="/Images1/_t/images_jpg.jpg"/></br><ul><li> Designation :' + tasksEntries[i].Designation + '</li><li>Phone# : 123-234-1233</li></ul>'

});

}

}
 //Handled event for node clicked.
 function onChartNodeClicked(node) {
 //If we need to do anything specific when clicking a node.
 }
 function onFailure() {
 alert('script failed');
 }
 }

 //Recursive function to create <ul><li> organization structure.
 function getChildNodes(tasksEntries, headName, liststring) {

//var childs = tasksEntries.filter(function (item) { return (item.Manager == headName) });
 var childs = GetChildArrayObjects(tasksEntries, headName);

if (childs.length > 0) {

liststring = liststring + "<ul>";
 for (var cnt = 0; cnt < childs.length; cnt++) {
 var head = childs[cnt].Title;
 var title = childs[cnt].Designation + ", Manager :" + childs[cnt].Manager;
 liststring = liststring + "<li class='bladerunner' title='" + head + "'>" + head;
 liststring = getChildNodes(tasksEntries, head, liststring);
 liststring = liststring + "</li>";
 }

liststring = liststring + "</ul>";
 }

return liststring;
 }

//Alternative function for .filter function to query child objects for a parent in an array
 function GetChildArrayObjects(items, manager) {

var newArray = [];
 for (var i = 0; i < items.length; i++) {
 var item = items[i];
 if (item.Manager == manager) {
 newArray.push(item);
 }
 }

return newArray;
 }

</script>

JQuery OrgChart basically needs a <ul><li> (unordered list) format for populating the Org-Chart. So I am querying the SP List using the SCOM(javascript) and using a recursive function (getChildNodes) the <ul><li> structure is created. After loading this <ul><li> structure I call the jquery orgchart function to populate the hierarchy on the other <div>

The main checkpoints on the above script are :

  • loadStructure() – JS Function uses SharePoint JS SCOM to Query the list to get the Parent-Child Hierarchy.
  • GetChildArrayObjects() – its an alternative to .filter JS function since this is not supported on IE8.
  • getChildNodes – Recursive function mentioned above – Which basically structures the unordered list.(see the <ul> mentioned on image below)
  • $(“#organisation”).orgChart({ container: $(“#main”), nodeClicked: onChartNodeClicked });   – This line of  jQuery code in the above script actually reads the <ul><oli> and generate the OrgChart.  While you skim the above code, you will be able to see a <ul> with ID as ‘organisation’ created which is read and org chart is populated to a <DIV> ‘main’
  • After creating the orgChart, I am iterating through the <DIV> of the OrgChart block according to its ID to enable the ballon

//enabling balloon for each orgchart block
for (var i = 0; i < tasksEntries.length; i++) {

$("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({
contents: '<img src ="/Images1/_t/images_jpg.jpg"/></br><ul><li> Designation :' + tasksEntries[i].Designation + '</li><li>Phone# : 123-234-1233</li></ul>'

});

Finally the OrgChart is populated as displayed below.  You can see a <ul><li> list on the top, which can made to visible=false to the <DIV> with ID ‘left’ on the above mentioned script, displayed only for testing purpose.

orgChart

Hope you have enjoyed this article, Kindly let me know if  there is any issues .


					
Advertisements

50 thoughts on “Organization/Hierarchy Chart on SharePoint (using jquery, Javascipt-CSOM)

    Fernando H said:
    December 12, 2013 at 6:09 am

    Many thanks for this code, you save my life/time/work :D!!

    JCM said:
    April 2, 2014 at 9:40 am

    Abin, Thanks for this post it was what I had been looking for to create a custom dynamic Org Chart. It is especially helpful in connecting a SharePoint List to the plug-in to create the Org Chart. One question, if I may: If I needed to filter the results for a particular Office, let’s say Policy, what would this look like in the [var viewXml = 1200] or is it not possible? Or if I wanted to select a certain list view which is already filtered? I have tried a couple of options but none seem to work to filter the results set and display the Org Chart [i.e. var view = targetList.get_views().getByTitle(“Policy”);]. Any help would be appreciated! Again, THANKS for the post and sharing your challenges for all to learn from. Cheers!!!

      Abin Jaik Antony responded:
      April 4, 2014 at 11:20 pm

      JCM,
      You are welcome.

      If I understand your question correctly, You have a list with multiple views created on it and you need to create an org chart as per the results on that view. If this is the case, you need to properly maintain the parent – child relation between the items on that view.

      In any case you need more help on this, I am ready to help so that we can have a skype session or something – Kindly drop your contact details via this link https://abinjaik.com/itissue/

        JCM said:
        April 5, 2014 at 1:31 am

        Thanks Abin! I sent you the request through your IT Issue form. You are correct, I am wanting to pull the results from a specific view within the SharePoint List. The Parent – Child relation between the items is still maintain but getting the query for the [var viewXml] to look at the specific view is what I am running into difficulties in doing. Everything else you have posted works great with my custom Contacts list and I have been able to make the necessary modifications for my client’s needs except for pulling results from a specific view. Thanks again for your assistance.

        Abin Jaik Antony responded:
        April 7, 2014 at 5:43 pm

        JCM,

        I got a chance to look at your data on the list template data. What I found was, on the view which you are trying to populate the orgChart doesnt have top person whose manager is NULL. Means, this orgchart work on a hierarchical model whose apex need to be with parent as null(another option is given in OR part). See the sample data i have provided, for the entry “John Doe” Manager value is NULL.

        So for the SP list view results from which you are trying to generate orgchart should have a person whose parent is NULL.

        OR

        You need to hard code the apex of the tree structure on the line number 70 of my sample code, with a CAML query to filter out your department members

        Say,
        var topHead = GetChildArrayObjects(tasksEntries, ‘parent’);

        Jeff – We can have a skype / Team view Session to explain the things better.

    imelgou said:
    April 22, 2014 at 6:05 pm

    Hi thank you for your post, it’s really a great job.However I have problem I only get the list, the graphical chart is not available.I upload all the jss and css files, but I din’t get the isue.

    Thank you for your answer

      imelgou said:
      April 22, 2014 at 7:28 pm

      Finaly i found the problem, I put the content editor in page using already à script file, so it has created a conflict while calling the js file.
      One more time thank you for your post

        Abin Jaik Antony responded:
        April 23, 2014 at 10:32 am

        You are welcome, Imelgou….!

    imelgou said:
    April 23, 2014 at 1:22 pm

    Hello it’s me again :).
    I have tried your script with some modifications in sharepoint 2013, and as i said it worked. Now I’m trying to use it in sharepoint 2007 do you think that’s going to work or is there a problem of compatibility with MOSS 2007

    Thank you

      Abin Jaik Antony responded:
      April 23, 2014 at 11:14 pm

      this logic will work only with sharepoint 2010 and above. Since utilizes JS-CSOM

    thesharepointextra said:
    April 24, 2014 at 1:15 am

    Hi Abin! Just had a quick question (I hope) for you concerning the Org Chart. Everything is working great and after a little CSS tweaking it looks great in the browser. However, as users always do they want to be able to print the chart off. Unfortunately, I am not able to get the chart to print very well. I have tried to just do a File=>Print Preview through the browser but it doesn’t want to print what is displayed on the page. I have tried creating a JavaScript Print function which works for all the other elements being printed (i.e. Banner, instructions) but the chart itself will not print on the new page. Any thoughts on how to get this to print nicely? Have you been able to print your own in a nice format? Any advise would be appreciated. Thanks!

    Shelli said:
    August 25, 2014 at 10:58 pm

    I do not have access to the “hive’s _layouts folder” can I still use this solution” I have other jquery scripts that I am using in a Scripts Library to which everyone has access.

      Abin Jaik Antony responded:
      August 26, 2014 at 12:01 am

      No issues, you can place in any accessible location

        shellig said:
        January 8, 2015 at 7:52 am

        Do not know why it is not working… I do not even see the unordered list show up… it gives me •[object Object] – not sure if it is a javascript library issue or not… I will look over this again tomorrow. I am using SharePoint 2010 Foundation and have this in a scripts library. Also, instead of “Title”, I changed the field to “Name” to be more clear and updated that under context/load and var headName and tasksEntries[i].Name and head = childs[cnt].Name; Other than that and using the list name “OrgChart” instead of “Employee”, I have made no changes (oh except for the references at the top…since I already had 1.11.1 loaded for another script… perhaps that is the problem?)
        Is it maybe the SharePoint Javascript SCOM?

        shellig said:
        January 8, 2015 at 9:00 am

        Was not the SharePoint JavaScript SCOM… but was using the “People Picker” so when I made a duplicate column with just text, I got one listing… just the top manager, still looking at it 🙂

        Abin Jaik Antony responded:
        January 8, 2015 at 9:07 am

        @Shellig : I can provide you clean solution if you can share me the scripts & Sharepoint list stp with data.

    Neil said:
    December 10, 2014 at 6:04 pm

    Hi,

    This looks awesome, but it’s not working for me…
    It pulls the list ok, but does not show the chart just like ‘imelgou’.

    I see you did use “!important” so should override any conflicts, provided it is the last script to run on the page.

    I changed the location of the js and css files…
    Is this ok?…

    Thanks,
    Neil

      Neil said:
      December 10, 2014 at 6:06 pm

      The above deleted my text… Hopefully this works…

      Neil said:
      January 12, 2015 at 3:35 pm

      Finally got it to work.

    shellig said:
    January 8, 2015 at 5:48 am

    Do not know why it is not working… I do not even see the unordered list show up… it gives me •[object Object] – not sure if it is a javascript library issue or not… I will look over this again tomorrow. I am using SharePoint 2010 Foundation and have this in a scripts library. Also, instead of “Title”, I changed the field to “Name” to be more clear and updated that under context/load and var headName and tasksEntries[i].Name and head = childs[cnt].Name; Other than that and using the list name “OrgChart” instead of “Employee”, I have made no changes (oh except for the references at the top…since I already had 1.11.1 loaded for another script… perhaps that is the problem?)
    link rel=”stylesheet” href=”Scripts/jquery-orgchart-master/jquery.orgchart.css” />
    link rel=”stylesheet” href=”Scripts/jquery-ui-1.11.1/jquery-ui.css” />

    script src=”Scripts/jquery-1.11.1.min.js”>
    script src=”Scripts/jquery-ui-1.11.1/jquery-ui.min.js”>
    script src=”Scripts/jquery-ui-1.11.1/jquery-ui.js”>

    script src=”Scripts/jquery-orgchart-master/jquery.orgchart.min.js”>
    script src=”Scripts/jquery-orgchart-master/jquery.orgchart.js”>
    script src=”Scripts/jquery.balloon.js”>

    Neil said:
    January 12, 2015 at 4:30 pm

    How do I add an Image in the same block as the person (not the Balloon).

    E.g.
    In my list I want:
    Title | Manager | Designation | W-Phone | C-Phone | PhotoURL

    How do I add all these fields to the main box (Not the Balloon).
    * PhotoURL is the link to the Photo that will show on the block.

    It needs to be 100% dynamic (Pulled from the list)

    Thanks,
    Neil

      Abin Jaik Antony responded:
      January 17, 2015 at 12:31 pm

      you can see, i am creating html for listing inside that you can try your html with images. Please update if this doesnot work. thanks

        Neil said:
        January 19, 2015 at 6:27 pm

        Thank you very much, I did manage to figure it out. I added a variable for it and added it to the “listString.

        Abin Jaik Antony responded:
        January 22, 2015 at 12:23 am

        Perfect…!

      Arun Asokan said:
      October 20, 2015 at 9:37 am

      Hi, would someone be kind enough to show me how this would work? I am a bit of a javascript/jquery novice here 😦

    Neil said:
    January 20, 2015 at 7:13 pm

    Hi, Me again.

    So far it is working perfectly, and the Images are pulling through, and set them to auto size to an exact size and changed the height and width of the boxes.

    Q: How can I get my text underneath to not wrap within the box i.e. overflow?
    The current structure is:

    Users Full
    Name
    (System
    Administrator)

    How do I clean this up to look like this?:

    Users Full Name
    (System Administrator)

    PS: I did manage to create a new line to place the designation in brackets, so don’t need that.

    Thanks again for an Awesome Script.

    Jatin Anand said:
    March 26, 2015 at 5:56 pm

    Hi Abin,

    Thanks for the solution.. however im not able to get it to work.

    So i’m trying to run this on o365. I’ve created a new folder under the ‘Assets’ library and have dropped all the files there. On a content page, i’ve referenced the script file in a CEWP. But the script fails! I get an error on the jquery.orgchart.js file. first line.. “Uncaught syntaxError: unexpected token < "
    1st line being
    If i remove this line, i get the same error on the next line. Next line is <html lang="en"….

    Any help will be appreciated!

    thanks

      Abin Jaik Antony responded:
      March 29, 2015 at 11:08 pm

      Could you check whether all JS, Jquery file are loaded properly…!? If you need we can have screen sharing session next time during Pacific time.

    mtngeekuk said:
    August 23, 2015 at 12:51 am

    Hi,

    This is looking really promising for my requirements, but can’t quite seem to get it to work. It’s loading the text LI items at the top, but not the visual chart.

    From your screenshots above, there is a reference to two files in the script that don’t appear to be available in the github download:

    jquery-ui-1.10.3.custom.css
    jquery-ui-1.10.3.custom.js

    I’m guessing that as they are called “UI”, they are essential to getting it to work.
    Unless of course I’ve missed something else, then in which case any and all help would be very much appreciated!

    🙂

    mtngeekuk said:
    August 23, 2015 at 3:57 pm

    Hi, silly mistake on my part (self answering my own question above!).

    Another one now, as I’m not familiar with JQuery and JavaScript (although after this, I’m reading up!!):

    I want to have the balloon information (designation / phone number / image etc.) inside the main node displayed, with a different field (more info if you like) to be displayed in the balloon on click.

    Could you run through how I would change this please? I’ve been trying various things, but I either get no chart at all, or it only affects the Head (i.e. top of the chart) node.

    Thanks again in advance…

      Abin Jaik Antony responded:
      August 23, 2015 at 5:58 pm

      Could you please try with extra HTML container inside

      • for the node. For eg:
        • Name, Address etc.
    Erik said:
    September 8, 2015 at 5:40 am

    Hi Abin Jaik,

    Im new at using scripts in SharePoint.
    When I follow your instructions, I get the following error: script failed
    The list is called: organisation and I use the 3 fields: Title, Designation and Manager.
    I copied the files under LAYOUT.

    Is there something I have to change in the script?

    Regards,

    Erik

      Abin Jaik Antony responded:
      September 8, 2015 at 8:05 am

      Could you please check the path on your code to the files in /_layouts/ folder?

        Erik said:
        September 9, 2015 at 1:57 am

        You mean C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS ?

        Abin Jaik Antony responded:
        September 9, 2015 at 8:39 am

        No. I mean the http relative path to your depended scripts files like orgchart JS, CSS etc. I have mailed you a script file which have CDN references. Hope it helps.

        Abin Jaik Antony responded:
        September 9, 2015 at 8:45 am

        Hi Eric,

        Please find the attached orgchart.txt file for the script, which I have used CDN references for JQuery & CSS. Also place your orgchart ,Balloon JS & css files directly in the StyleLibrary, so that references like */Style%20Library/jquery.orgchart.js *will work fine. Import the attached OrgchartList.stp to fetch the sample OrgList data.

        If you need a direct help, I can come over skype. Please share your skypeID, if needed.

        On Wed, Sep 9, 2015 at 1:57 AM, Abin Jaik Antony wrote:

        >

    Arun Asokan said:
    October 20, 2015 at 9:41 am

    Hi Abin,

    The post is great. I am able to create the org chart perfectly, just looking to make a few changes. How do I get the photos to pull through from the list? How do I add the designation on the bubble beneath the name? How do I make the name a link to the list item?

    Any help would be much appreciated.
    Thanks
    Arun

      Abin Jaik Antony responded:
      October 21, 2015 at 10:12 am

      You can add a Column to list of type Picture / Hyperlink. Then you access the image using the list item method “.get_url()” . See code below.

      @Arun : is the email address you mentioned while commenting you actual email? I can send the entire code to that email, if it is valid. Thanks

      //Populating OrgChart using Jquery OrgChart Plug in – Basically it reads Created

      • list named ‘organisation’ and writes a TABLE – DIV structure.
        $("#organisation").orgChart({ container: $("#main"), nodeClicked: onChartNodeClicked });

        //enabling balloon for each orgchart block
        for (var i = 0; i < tasksEntries.length; i++) {

        $("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({
        contents: '

        • Designation :' + tasksEntries[i].Designation + '
        • Phone# : 123-234-1233

        '

        });

        }
        }
        }

        }

        Arun Asokan said:
        October 22, 2015 at 1:55 am

        Many thanks for your quick reply Abin. Yes arun23285@gmail.com is my email. I would appreciate greatly if you could send the whole code to it. Thanks again.

    Caetanow said:
    January 6, 2016 at 11:07 am

    Kinda hard to find the specific css’s, but it’s working! Tks!

    timmoss1 said:
    April 20, 2016 at 6:51 am

    Hi Abin, I’ve created the list just like yours, copied the scriptfile just like yours and made sure the js and css files are in thelayouts directory, but still I only see the parent node. The child nodes are not displayed in the left hand list or in the chart. Any ideas on what I’m doing wrong please? Thanks

      Abin Jaik Antony responded:
      April 20, 2016 at 8:30 am

      Seems like fetching data for the parent node have issues. Could you please place Javascript “debugger;” inside and debugg through the code and see whether all data is fetched correct and forming the UL LI HTML

    timmoss1 said:
    April 20, 2016 at 9:22 am

    Hi Abin, it gets to context.executeQueryAsync(); and then it jumps over all the remaining javascript and moves on to some layout javascript.It renders the parent node correctly but nothing below that.

      Abin Jaik Antony responded:
      April 21, 2016 at 10:52 am

      Make sure this of code ” var childs = GetChildArrayObjects(tasksEntries, headName); ” gives the child objects of parent, if not some issue with your SP Columns or Data in the list.

    Vishnu said:
    September 7, 2016 at 10:19 pm

    Hai,
    The post is great but i’m not getting the chart view. and when i tried to download
    jquery-ui-1.10.3.custom.css and jquery-ui-1.10.3.custom.js its unable to download. May i know whats the issue.

    Expecting your replay ASAP

      Abin Jaik Antony responded:
      September 7, 2016 at 10:28 pm

      You can use normal jquery-ui css and js too. Could you please try using CDN of jqueryui css and js.

        Vishnu said:
        September 7, 2016 at 11:29 pm

        Hi its working fine.. I have couple of doubt about this
        1. is it necessary to include jquery-ui-1.10.3.custom.js and jquery-ui-1.10.3.custom.css file to view the content in chart form.
        2. i’m getting the bullon property when i tried to customize it. its not changing what all i need to do for that.
        i included
        for (var i = 0; i < tasksEntries.length; i++) {

        $("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({
        contents: ' Designation :’ + tasksEntries[i].Designation + ‘Phone# : 123-234-1233′

        });

        to enable bullon and customized it as

        for (var i = 0; i < tasksEntries.length; i++) {

        $("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({
        contents: ' Name:’ + tasksEntries[i].Title+ ‘Phone# : 123-234-1233’

        });
        but still it showing Designation and phone number.

        Thank You for your previous replay.

    Vishnu said:
    September 7, 2016 at 10:27 pm

    Hai

    I tried to down load jquery-ui-1.10.3.custom.css and jquery-ui-1.10.3.custom.js but it downloading. and i want to draw organization chart but the UI is not present. Can you please help me

    Vishnu said:
    September 23, 2016 at 1:51 am

    Hi,

    I have one question. If you have more than one organozation head and both looking different department then how could it look.

    when i tried to do so. I’m not getting correct result,
    For Example.

    Ravi is head of Production dept and Rajesh is for marketing. Under them many others. My requirements is this. I will show in format

    * Ravi
    — Giri
    — Girish
    –Reena

    * Rajesh
    — Rajeev
    — Anoop
    **Arun

    I hope my question is clear.

    Please Help me.

    Regards

    Vishnu

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s