5

I'm looking for a graph (not chart) library for javascript. I only need to draw less than 10 nodes, so performance is not a big issue.

Needed features:

  • should be able to coexist with / use jQuery
  • directed graphs
  • align graph automatically (no collisions is sufficient I think)
  • ability to label edges
  • ideally it's free as free beer and freedom of speech

I found a good thread here with many libs. But none of them seemed to support labels for edges.

Any hints?

Community
  • 1
  • 1
Lincoln
  • 744
  • 1
  • 7
  • 20
  • I don't really care in what way it gets rendered. If I can easily create an svg with some lib, then that's a solution. – Lincoln Jan 22 '12 at 01:37

5 Answers5

3

I think that arbor.js can do the work > http://arborjs.org/.

It is based on jQuery, aligns graph automatically and makes directed graphs. You can also label edges. Look at this post:

Add label to edges in arbor.js (Query plugin)

One example of labeled edges:

http://arborjs.org/halfviz/#/the-abominable-snowman

Hope this could help you!

Community
  • 1
  • 1
cabreracanal
  • 924
  • 1
  • 14
  • 36
  • arborjs only has this wobbly layouting and labels (as well as nodes) would have to be drawn manually...so there's no real help for me in this lib...but thanks anyway – Lincoln Jan 26 '12 at 20:29
  • Currently arbor seems to be unmaintained with many issues remaining unfixed. A shame, since it's a nice and cleanly documented little library. In my (brief) experience it'll do the job if all you need is something similar to its demos. I like that it lets you do your own drawing. – mpartel Feb 26 '13 at 23:05
2

JGraph for Javascript supports your required features, but I'm afraid it isn't free.

In their words:

mxGraph is the only fully client-side JavaScript Graph Visualization and Layout Solution

It also has a good StackExchange-based forum for support.

Tim Gee
  • 1,062
  • 7
  • 9
  • At least $4.900...That is a little too expensive for my project. But from what I saw this is a really full featured library. – Lincoln Jan 28 '12 at 02:23
1

Here are three open source options that all support laying out directed graphs. Some have tools to render them too:

  1. JointJS is a great free library, and has several demos with source which are worth a look. Its UI can be used to edit and manually modify the layout of the graphs as well.

  2. Springy is a library for laying out and rendering directed graphs using a spring/force model.

  3. Dagre is a layout engine for directed graphs that runs purely client-side and is rendering agnostic.

This blog post described using JointJS and Dagre in tandem.

Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
1

Maybe this?

I haven't used it, but the demo looks like it supports your main points.

FZs
  • 16,581
  • 13
  • 41
  • 50
loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
  • This one really seems to support everything I need. The only thing that bugs me a little is, that it uses flash. But since there doesn't seem to be an alternative I'll go with it. Thank you! – Lincoln Jan 28 '12 at 00:26
0

Canviz (http://code.google.com/p/canviz/) does support edge labeling.

For example, see dfa.gv at http://www.ryandesign.com/canviz/.

Dmitry Ovsyanko
  • 1,416
  • 11
  • 6
  • Thanks, but as far as I can see this needs preprocessing on the server side (generating an [xdot file](http://www.graphviz.org/doc/info/output.html#d:xdot) which needs graphviz). So this is not really only client JS. I need to create graphs dynamically and generating xdots without graphviz seems to be pretty difficult. Plus it's not sure if this will run with jQuery (see [#66](http://code.google.com/p/canviz/issues/detail?id=66&q=jquery&colspec=ID%20Type%20Status%20Priority%20Owner%20Summary)) – Lincoln Jan 22 '12 at 01:30