65

We are using google org chart API to display our org charts. This works well but we need something that supports:

  1. One person reporting to multiple managers
  2. Co heads of a functional areas.

Are there any competing tools that give better support for the above.

NOTE: For Gorka LLona, who suggested this solution below in one of the answers, i found a few bugs, here is a screenshot of the issue i am running into using your test example.

enter image description here

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • 1
    Hi, what did you end up using? Your criteria matches mine. Thanks. – ngen Nov 22 '11 at 04:13
  • 1
    @ngen - still using Google Org Chart API (and still missing the features above :( ) – leora Nov 26 '11 at 00:28
  • @leora - Mr. Llona updated his library. You should try it again. – bgmCoder Mar 11 '14 at 03:06
  • Let you say that version 1.0.0beta1 has just be released. This is the first mayor-number version release. Includes more types of nodes, better rendering, decoupling of the JSON-defined organizational chart (useful, for example, for dynamic generation of the structures), a simpler form of invocation, chart zoom, drag and print to PDF (so you can render a broad chart inside a fixed-width DIV page), and multiple, different-structure charts on the same page, and some other minor features. NEW HOME PAGE FOR THE LIBRARY: http://librerias.logicas.org/lib_gg_orgchart – Gorka Llona Mar 27 '14 at 04:35
  • I made this one using Jit JS: https://github.com/rlopez0689/OrgChartJit – Rodrigo López Feb 18 '16 at 21:50
  • Check my solution: OrgChart.svg - https://github.com/BrightShadow/orgchart.svg . This is a modern full SVG orgchart with support of custom styling, tip-over / stacking possibility in the best known form. I would be very happy if it helps someone. – BrightShadow Apr 21 '16 at 19:34
  • I built a jquery plugin **[OrgChart](https://github.com/dabeng/OrgChart)**. Hope it's a good helper for developers who want pure DOM and jQuery light-weight solution without other third-party dependencies. Just sharing with you guys. – dabeng May 10 '16 at 00:40
  • This should not be closed; this is not "off topic." This is a perfectly good programming question. "Is there a better library than x?" – Andrew Koper Jan 26 '18 at 19:32

13 Answers13

27

D3 - http://d3js.org/

Here is an example - they are a bit hard to find

http://mbostock.github.io/d3/talk/20111018/tree.html

James Westgate
  • 11,306
  • 8
  • 61
  • 68
  • 4
    Here's an example which I've made with d3.js http://robinl.github.io/d3_orgchart_yammer/website/ – RobinL Dec 18 '15 at 12:55
  • Another link directly working: http://mbostock.github.io/d3/talk/20111018/tree.html – koppor Jul 03 '16 at 20:52
  • 1
    @RobinL, that is beautiful.. i've been looking for your exact chart for so long.. I was able to get the tree code, but didn't know how to display user details when hovering over them.. how did you do it ? – d-_-b Aug 18 '16 at 04:45
  • D3 binds rows of data to the nodes. Each row of data is represented by a dictionary. To make the popup work, I pass this dictionary to handlebars to render as html, and then write to the div with id "#profile-template". the relevant code is here: https://github.com/RobinL/d3_orgchart_yammer/blob/master/website/js/main.js#L495 – RobinL Aug 19 '16 at 11:13
  • @RobinL, this is my [code](http://pastebin.com/raw/27KRSuN0), it reads data from this [abc2.json](http://pastebin.com/raw/Me4iSK2F) file. I need to display Details like email, phone & photo on the right, [as such](http://i.imgur.com/Z7T5JEe.png). Should i create a ? I'm total noob at web-dev, and I realize this is asking for much, so I can give you stackoverflow bounty or amazon gift card if u're interested in coding this – d-_-b Aug 29 '16 at 22:19
26

You could use Jit (The JavaScript Infoviz Toolkit), there's a good example here. This is what I used to create an org chart at my company (backed by a PHP script that turns AD relationships into JSON).

Beau
  • 11,267
  • 8
  • 44
  • 37
  • 1
    this doesn't really look as professional as google org chart – leora Jan 21 '11 at 09:02
  • 1
    @ooo - Here's what I've made it look like: http://awesomescreenshot.com/0736a7o38 & http://awesomescreenshot.com/00f6a7p88 – Beau Jan 21 '11 at 21:30
  • 1
    @Beau:Your links don't seem to be working any more. – Nick Cox Nov 04 '11 at 11:49
  • Could you rehost your image of the orgchart? I'm thinking of using Jit but need a more professional look to it. Thanks. – ngen Nov 22 '11 at 04:14
  • 4
    I've re-hosted the image; here you go: http://i.imgur.com/M99PA.png (I think the second image was a vertical rather than a horizontal orientation) – Beau Dec 05 '11 at 21:16
  • Hi, i just started with Jit, can you please tell me how you managed to put images to your nodes and format labels text? Thanks – Gatekeeper Mar 22 '12 at 12:08
  • +1 for JIT. With a little bit work, we can make it much more professional and useful as google org chart which is too static, see an example [here](http://www.visioneo.org/organization-chart) – Dominique Jul 17 '13 at 06:12
  • @Beau - Any chance you could open source your solution? – fractal Oct 05 '15 at 16:32
  • @user904538 I looked for the source but don't have it any longer. Sorry! – Beau Oct 06 '15 at 17:50
18

Not sure if you're still looking considering this is 2 years old but I'm in the same situation and found this:

yFILES Interactive OrgChart Demo, Visualizing Orgcharts with JavaScript

Some other ones I have found:

jOrgChart github.com/wesnolte/jOrgChart and github.com/dabeng/OrgChart

Organization Charts using JS jvloenen.home.xs4all.nl/orgchart/

I ended up using D3.js to do it. I use their TreeLayout and edited it to fit my needs. Here is some sample code:

var tree = d3.layout.tree().nodeSize([70, 40]);
var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.x + rectW / 2, d.y + rectH / 2];
});

var svg = d3.select("#body").append("svg").attr("width", 1000)
    .attr("height", 1000).append("g")
    .attr("transform", "translate(" + 350 + "," + 20 + ")");

Here is a jsFiddle of what I started: jsfiddle.net/augburto/YMa2y/

Sebastian
  • 7,729
  • 2
  • 37
  • 69
aug
  • 11,138
  • 9
  • 72
  • 93
  • thanks for the suggestions .. i wound up doing some custom coding around the google org chart to get what i needed (co heads, dual reporting lines) but i am always on the lookout for a cleaner solution – leora Jun 19 '13 at 21:50
  • Just wanted to say for my situation I ended up using D3.js and, like you, I custom coded around it. – aug Oct 11 '13 at 16:04
  • What kind of D3.js chart did you use? – Michael Böckling Oct 16 '13 at 12:56
  • @BuddyCasino I just used their TreeLayout. You can find an idea of it [here](http://jsfiddle.net/augburto/YMa2y/) I also have some questions regarding it if you look in my profile. – aug Oct 16 '13 at 16:05
  • Thanks, I noticed the TreeLayout, but is there a way to render the connections as lines with 90° angles instead? – Michael Böckling Oct 19 '13 at 16:16
  • @BuddyCasino you might want to make a question for that but in short yes. See [here](http://stackoverflow.com/questions/10247800/tree-dendrogram-with-elbow-connectors-in-d3) – aug Oct 19 '13 at 21:37
  • Does your fiddle work with d3 3.4.3? I keep getting a js error: `TypeError: d3.layout.tree(...).nodeSize is not a function.` on this line (around 787): `var tree = d3.layout.tree().nodeSize([70, 40]);` – bgmCoder Mar 09 '14 at 01:39
  • 1
    @BGM Just tested my jsFiddle with 3.4.3 and it works fine. Not sure why you're getting that error -- check your D3 and see if you can find the nodeSize function? – aug Mar 09 '14 at 02:08
  • 1
    @aug - Ah, I see - I had an extra script added [me feeling bone-headed - Sorry!]. I got it working by placing the fiddle in a separate js file and loading it *after* the body. It works! Thank you! – bgmCoder Mar 09 '14 at 02:41
  • 1
    @aug- is there an opensource library that behaves like yfiles? – XxXk5XxX Jan 14 '15 at 16:24
  • @XxXk5XxX hmmm by "behaves like yFiles" what specific functionality are you referring to that you hope to find in an open source library? – aug Jan 14 '15 at 16:43
  • @aug the design of itself that and also be able to get data from json. best regards. – XxXk5XxX Jan 15 '15 at 01:20
  • @XxXk5XxX hmm I'm not entirely sure I know of any :( Sorry about that. Not sure if [this question](http://stackoverflow.com/questions/6162618/java-graph-library-for-dynamic-visualisation) may have things you can explore? – aug Jan 15 '15 at 01:43
  • Plus one for jOrgChart. There is a maintained fork available at https://github.com/dabeng/OrgChart – koppor Jul 04 '16 at 07:36
6

In short @Cam is right, but you don't necessarily need to look at Silverlight or Flash. I would recommend looking into the Raphael.js library. It's more low-level than what you seem to be after, but the API is pretty simple.

In particular the Graffle example would be a good place to start.

Horatio Alderaan
  • 3,264
  • 2
  • 24
  • 30
4

For those looking for a simple, open-source Javascript Organizational Chart library:

I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael.

This library satisfies requirements #1 and #2 of the original question.

Take a look at the site for some examples and download:

http://librerias.logicas.org/lib_gg_orgchart/index.html

If you find it useful, please let me know.

bgmCoder
  • 6,205
  • 8
  • 58
  • 105
Gorka Llona
  • 124
  • 4
  • this is pretty interesting but i found a few bugs. I had a screenshot to the question to show you the issues i ran into – leora May 17 '12 at 22:39
  • can you please respond to the bugs i mentioned above – leora Jun 02 '12 at 05:56
  • New web home for lib_gg_orgchart is http://librerias.logicas.org/lib_gg_orgchart. New version will come soon, fixing some bugs and integrating collaborator's changes. – Gorka Llona Feb 04 '13 at 15:10
4

New web home for lib_gg_orgchart is http://librerias.logicas.org/lib_gg_orgchart. I put here the old info: For those looking for a simple, open-source Javascript Organizational Chart library: I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael. Take a look at the site for some examples and download. If you find it useful, please let me know. New version will come soon, fixing some bugs and integrating collaborator's changes.

Gorka Llona
  • 124
  • 4
  • I've tried this out, and it works pretty well - the authour is responsive and helpful, which is a real plus! +1 – bgmCoder Mar 08 '14 at 15:51
  • Here is a method of using this library with a Sharepoint List rather than json. I haven't tried it, but I'm quite interested. http://sharepoint.stackexchange.com/questions/89772/sharepoint-2013-organization-chart – bgmCoder Mar 11 '14 at 19:52
2

In a commercial scenario yFiles for HTML certainly provides the required flexibility for drawing organization charts:

There is an organization chart demo online that shows how this can be implemented with the library (which is in fact a general purpose graph drawing library):

Organization Chart Demo Screenshot

The automatic layout algorithms in the library can both deal with purely hierarchic tree structures, but can also deal with "near-tree" structures, where elements can have multiple parents, e.g. to model a management team or multiple parent companies.

The library also has layout algorithms that can deal with generic graphs with arbitrary cyclic complexity and with the edge routing algorithms available, even rare edge cases can be visualized nicely, where edges that do not belong to the strict hierarchical tree-structure can be routed, too (e.g. to indicate an additional layer of relationships) - this is not part of the demo linked above, though, at the time of writing. The more generic layout demo however shows several of the layout algorithms and many of their options in action.

Disclaimer: I work for the company that creates that library, however on SO I do not represent my employer. My comments, thoughts, and answers are my own.

Sebastian
  • 7,729
  • 2
  • 37
  • 69
2

If you're looking for alternatives that works as a service like google does, I don't think you have any. If you're looking for libraries (js, php, flash) that can create these charts for you (you can install the libs in a server, and create a simple interface to create the chart objects) you can search for older posts in SO or by searching some blog posts in google.

If you're only interested in an Org Chart creator, just to get the work done, nothing beats Creately's solutions in my opinion. If you need to create just one diagram, and don't want to pay for it, you can use Lovely Charts.

Community
  • 1
  • 1
GmonC
  • 10,924
  • 1
  • 30
  • 38
  • i want something that i can programatically generate an org chart – leora Oct 27 '10 at 08:37
  • Ok, now I understand you want to programatically generate a chart. You could try creately's API (http://developer.creately.com/creately/Creately_API) and see if there's a possibility to create an org diagram, or search google for "organizational diagram creator", like http://www.codeproject.com/KB/cs/Org_Chart_Generator.aspx – GmonC Oct 28 '10 at 01:58
1

Well www.orgchartasp.net will also help you build / view orgcharts

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx (with images on the top)

http://orgchartasp.net/Sample1.aspx (with images on the left)

this is a .net library which will help you build the hierarchy at the backend and javascript at the client side.

Chandra Sekhar Walajapet
  • 2,534
  • 17
  • 24
1

G'Day ooo

I'll keep this short. No there isn't. Not with Javascript anyway. You might find http://www.cogmap.com/ interesting but it's not something you can use as a control on your own pages.

Personally, I'd be looking at some of the rich embedded media like Silverlight or Flash. Is that an option for you?

Cam

Cam
  • 135
  • 6
1

You can implement a solution with Graphviz and Javascript. Graphviz easily handles all three of your conditions. Create the graph in graphviz, and have it output in SVG format. From there, throw some javascript on it. For example, a partial family tree of Charlemagne, which is essentially an extraordinarily complex org chart.

Dan
  • 2,157
  • 20
  • 24
1

You could use a trie: https://github.com/mikedeboer/trie or https://github.com/odhyan/trie Mootools also has MIF.Tree: http://mootools.net/forge/p/mif_tree, which displays tree structures

peterhil
  • 1,536
  • 1
  • 11
  • 18
-2

I too am using google org chart API to display our org charts. https://developers.google.com/chart/interactive/docs/examples

This works well but we need something that supports:

1)Source is a Google Spreadsheet document that houses the data for the org chart. 2)When a new person is added to the data, an new node is created. 3) Horizontal layout for 1st and 2nd level as well as vertical layouts lower levels. Similar to this: http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&inline=1

1 and 2 are supported by Google and working great, but need something for that 3 requirement (Horizontal and Vertical layouts)

user2093023
  • 9