Are there any better javascript org charts compared with Google Org Chart API? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

开发者_如何转开发

Closed 9 years ago.

The community reviewed whether to reopen this question 5 months ago and left it closed:

Original close reason(s) were not resolved

Improve this question

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.

---

D3 - http://d3js.org/

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

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

---

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).

---

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/

---

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.

---

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.

---

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.

---

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.

---

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):

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.

---

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

---

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.

---

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

---

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.

---

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)