JavaScript/Angularjs Organizational Chart (Custom Nodes/Edges)

Question

• I'm interested in finding an open source library that reads JSON data to create a hierarchical layout for an organizational chart. (It does not need fancy physics)
• Secondly, i need support for IE8.
• Last, I need it to be customized, both the nodes and edges.

I've come across TONS of libraries and directives out there but most seem un-customizable with both the nodes and edges or very unfriendly with ie8

Ones I've tried

• Google Charts
• Infovis
• VisJS
• Protovis
• JointJS

The ones listed above either had issues with simple modification of their html layout, edges, wasn't compatible with IE 8, or just didn't work well with angular.

Any suggestion for a node/edge hierarchy network graph that would work with angularjs (1.2.x) and IE 8?

Answer 1

KeyLines JS has a wide support for browsers, since IE7. While the exposed API is always the same, on old browsers (IE7/8) it has a Flash renderer.

Also, there's an official Angular directive (in beta) for it that customers have already been using.

Note: it is not an open source library, but a commercial one.

Other js network visualization can be wrapper with a custom Angular directive but it may be not trivial to debug and fix issues, especially with old browsers. It is usually fine if you have to build a project for fun or show off, but when it comes to production you really don't want to fiddle with it.

Disclaimer: I'm part of the dev team of KeyLines.

For completeness, have a look also at this answer: Zoomable network graph in AngularJS