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

Answer 1

Maybe check out Google Charts?

Answer 2

Take a look at graphviz

Answer 3

I can whole-heartedly recommend flot - excellent!

See examples here.

Answer 4

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.

Answer 5

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.

Answer 6

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/

Answer 7

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

Answer 8

yFiles might be useful for this.

Answer 9

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

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

}

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.

Answer 12

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.

Answer 13

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/

Answer 14

It wasn't available when you first asked this question, but now there is www.IdeaTree.us . There's an Ajax API with which you could embed into your site and dynamically create directed graphs according to your business rules. It renders to the HTML5 canvas tag, so data transfer is lighter weight than a png image. Works in Safari, Firefox, Chrome (not IE).

Edges can be labelled in the interactive interface, and though there exists the same thing in the API, that part isn't currently exposed.