Recommendations for visualising a directed graph in a Web UI

Question

I need to visualise a directed graph that represents the flow of data in a web application. Can anyone recommend any JavaScript or Flash solutions for this please. It must support hooking a node click event because I need to fire off an AJAX call when this happens. Can be free or commercial. The server-side technology is Java if this makes any difference.

The JProbe Call Graph is the sort of thing I have in mind:

_{(source: javaworld.com)}

Thanks!

score 6 · Answer 1 · answered Sep 19 '09 at 11:18

6

I like WireIt. It's written in JavaScript and is quite versatile. And open source (MIT License)

answered Sep 19 '09 at 11:18

Benjamin Wohlwend

30,958
11
90
100

score 4 · Answer 2 · answered Sep 19 '09 at 15:49

Try this one:

http://flare.prefuse.org/

Flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player. From basic charts and graphs to complex interactive graphics, the toolkit supports data management, visual encoding, animation, and interaction techniques. Even better, flare features a modular design that lets developers create customized visualization techniques without having to reinvent the wheel.

score 4 · Answer 3 · answered Sep 19 '09 at 18:53

4

Also give a try Google Visualisation API and especially Org Chart .

answered Sep 19 '09 at 18:53

Mushegh A.

1,431
12
18

score 3 · Answer 4 · answered Dec 03 '12 at 13:50

3

The d3 library is much more versatile than the libraries mentioned above (it's also a lower-level library).

answered Dec 03 '12 at 13:50

C. Reed

2,382
7
30
35

d3 looks very cool. How would you use it to make a workflow graph? I guess you'd have an array of nodes and an array of links? – z0r Mar 04 '13 at 02:52

score 2 · Answer 5 · edited Sep 19 '09 at 11:19

2

You can use birdeye RaVis on Flash. It's open source.

edited Sep 19 '09 at 11:19

John Topley

113,588
46
195
237

answered Sep 19 '09 at 11:13

Amarghosh

58,710
11
92
121

score 2 · Answer 6 · answered Feb 27 '13 at 21:16

2

Our mxGraph library is built for such things. You can see an example application at the draw.io site.

answered Feb 27 '13 at 21:16

Frodo Baggins

8,290
6
45
55

score 1 · Answer 7 · answered Mar 07 '13 at 22:36

1

I'm using jsPlumb. From my initial tests, it looks more than capable of making this kind of graph. It's open source (MIT or GPL2), works with jQuery, MooTools and YUI, and can use SVG, canvas or VML for rendering.

answered Mar 07 '13 at 22:36

z0r

8,185
4
64
83

Recommendations for visualising a directed graph in a Web UI

7 Answers7

Linked