Optimized graph drawing for the web

Question

Having seen some suggestions for graphs, I wonder what's the optimum for my problem.

I want to render a directed graph to a servlet/picture that is displayed in the browser. There should be some kind of optimization of position. No dependency to Swing would be preferred. Algorithms are not important, since the structure of the graph is determined by business logic. It would be desired to be able add labels to edges as well. it would be optimal if i can serve this as png/svg.

Which library/service would you recommend?

clarifications:

1) The question is all about Graphs - like Directed Acyclic Graph - NOT - Charts.

2) flot, Google Charts - cannot plot graphs, only charts, or have i missed something?

3) no i do not need interactivity

4) graphviz would be nice, but the grappa java library is quite outdated and is built upon swing/awt. while it may be theoretically possible to render swing to images, it would not be my favorite way to to so in a server-app.

5) it would be fine to use an online service where the images are not hosted locally.

edit: added links to Wikipedia to clarify graph/chart term

Sculpture

Answer 1

As well as waiting weeks to hear about the Magic Framework that's going to solve all your problems in one line of code, there is also the other option of just Writing Some Code yourself to do exactly what you want... (I'm not saying it's 10 minutes' work, but it's probably one or two days, and you posted your question over two weeks ago...)

Have you had a look, for example, at the Wikipedia entry on Force-based algorithms-- it has pseudocode and a few links that might be helpful.

I'm assuming it is the layout algorithm that's the issue, and not the matter of creating a BufferedImage, drawing to its graphics context, PNG-encoding it and sending it down the socket. You really don't need a framework for that bit, I don't think.

Devonne

Been there, done that. If you really think that anybody can implement robust force-directed layout in just 2 days, and end up with something even remotely on par with JViews or yFiles (let alone aiSee), then you're a dreamer. That's like re-implementing Google Search instead of just using it. – Teshatesla

So my estimaste is more that somebody used to implementing algorithms should get something acceptable and "doing what they want" in a couple of days (the poster mentioned wanting "some kind of optimisation", but the issue of integrating into their project was also important). – Devonne

the solution i am aiming to is to write a wrapper for Prefuse that outputs png from one of my servlets. i have no plans to write algorithms that do planar graph layout by myself. – Sculpture

Answer 2

Take a look at graphviz

Worthless

You might want to add the details that runako provides – Cattan

Answer 3

yFiles might be useful for this.

Lodger

Answer 4

How about the dot component of Graphviz? It produces graphs (not charts), outputs to PNG and SVG, and supports labeling edges. You can shell out to dot to generate the image you need, and return an img tag that references that. Alternatively, you can return an img tag that references a URL that will generate the requisite graph (or retrieve a cached copy). Here's the dot info:

http://www.graphviz.org/pdf/dotguide.pdf

You might also take a look at WebDot, which is apparently designed for this purpose:

http://www.graphviz.org/webdot/

Biancabiancha

Answer 5

Try aiSee. It is used by all kinds of web-based applications for data mining, static program analysis, matrix visualization, network analysis, and whatnot. It is also used by some MediaWikis as their graph-layout backend.

They have a huge database of sample graphs over at aiSee.com. Check it out. It supports edge labels, export to mapped SVG and HTML, and is not dependent on Swing.

Hendecasyllable

Answer 6

For serverside, try JUNG, you can run it against Batik and produce beautiful SVG or PNG files. JUNG has a nice design and very powerful layout algorithms...

Also, since you mention that "it would be fine to use an online service", graphviz provide a service called webdot to render graphs.

There are others along this line as well... e.g. http://graph.gafol.net/ (seems to be down)

Client side:

• Try http://arborjs.org/ for a minimal(ish) library it is dedicated to layout, use this is you like to prefer your own rendering routines (div, canvas, svg, paper.js, processing... etc).

• I also like http://sigmajs.org/ for a more complete approach, build in touch support, plugins, file formats, etc.

Pidgin

Answer 7

We create mxGraph for such requirements. We did actually release it in 2006, but took a while to notice this question...

Recession

Answer 8

Interestingly, the Eclipse project has an SWT/JFace component/framework capable of displaying and generating (import/export) Graphviz's 'DOT' format, in pure Java:

ZEST (home page & download links)

See http://wiki.eclipse.org/Graphviz_DOT_as_a_DSL_for_Zest for usage examples.

Although ZEST is touted as an Eclipse plugin, it does seem that the DOT-manipulation API's can be used standalone and external to an Eclipse installation.

Cheers

Rich

Olwena

Answer 9

You may try sigma.js: http://sigmajs.org/

It is a lightweight, open source library in Javascript to display large graphs on the Web.

Ascarid

Answer 10

JPGD is a Graphviz parser in Java. It's a little abandoned, but the code is nice and clear, and if you find bugs I'm sure the author would accept contributed fixes.

Although advertised as a parser, it is also a generator. You can build Graphs as collections of Node and Edge objects, then get .dot using Graph.toString(). Getting this as a graphic would be a simple shell out to the Graphviz dot executable.

Alternatively, dot is very easy to generate yourself. In the simplest case, it's just a matter of writing a potted header

digraph myGraph {

... followed by one edge definition per edge

node1 -> node2 ;

... followed by a closing brace

}

Sublease

Answer 11

so i took alook at all the given answers and links, it looks like Prefuse/Flare will by the optimal choice. they have very appealing visialisations, plus they have built in support for graphs.

Sculpture

Answer 12

Maybe check out Google Charts?

Kamat

hey not such a bad suggestion: code.google.com/apis/chart/docs/gallery/graphviz.html – Boccie

Answer 13

You can use SVG in combination with Batik. I have used this several times for displaying graphics. Batik with Java 1.5 is very fast. With this solution you can program your graph in Java with no dependency on Swing. You can add labels where you want, host it as a Servlet and display it as png or svg.

You can create the graphs in SVG (this is an XML document).
You use Batik to transform the SVG-document to a PNG/JPG image.
You can use a Servlet to stream this image back to the browser.

In java you build an SVG(=XML) document. Samples for SVG graphs can be found here: Directed graph and here: Simple directed graph

Alidus

The first sample has been graphed with GraphViz. The second one with Inkscape. Do you have any advices for Java graph layout before calling Batik for rendering? – Trifling

How the layout is created depends on what type/kind of graph you want to build. My graphs where very structured and could be calculated using a grid with x,y coordinates. I created methods for addNode and connectNodes which did some calculation. – Alidus

Answer 14

See this question, especially Stephan's answer about prefuse. I read that you do not need interactivity, but prefuse still may be useful.

Ouellette

Answer 15

I can whole-heartedly recommend flot - excellent!

See examples here.

Rubdown

Answer 16

JFreeChart might be the way you want to go, but you make a distinction between Charts and Graphs. Maybe you can explain what you mean by that. I've usually used these terms synonymously. :)

JFreeChart has good scatter, bar and line graphs as well as fun ones like Pie and Dial so maybe it will work for you.

Clingy

adden links to the question to clarify graph/chart difference – Sculpture

That makes sense. Well, aiSee, suggested by RegDwight looks like a good choice then, though, it looks to be proprietary. Not sure if this is kosher with your situation or not. – Clingy