+1  A: 

Google has its Visualization API for use in JavaScript, which may of some use to you.


+4  A: 

If you are on the server side, look at the Bell Labs graph visualization toolkit. It's free and can dynamically generate what you want. Perhaps you can REST-like send your data from the browser to the server for rendering?


Mark Harrison
+13  A: 

JsVIS is pretty nice, but a little slow with larger graphs. If yours is small it should work well. My favorite is prefuse which apparently now has a Flex front-end now called flare which could be controlled with JavaScript.

Sam C
+3  A: 


Try PlotKit, which is built on top of the excellent MochiKit JavaScript toolkit (it would be compatible with jQuery, though you might want to drop jQuery after you see how beautiful MochiKit is!).

Jason Bunting
+6  A: 

I think Flare is definitely worth checking out. It supports both "graphs as charts" and "graphs as nodes".

Have a look at the Layouts->Force demo, which has a tree of nodes that can be dragged about: http://flare.prefuse.org/demo

+6  A: 

Since you mention jQuery: flot is a jQuery plugin that generates graphs with pure JS. I haven't used it myself but it looks pretty neat at first sight.

+1 - flot looks quite nice!
Optimal Solutions
Very nice, but not a graph.
Chris Farmer
+2  A: 

Maybe you can use http://ejohn.org/blog/processingjs/ a port to javascript of Processing Java library.( http://processing.org/ )

Not purely javascript, but have you considered flare? http://flare.prefuse.org In addition to graphML : http://graphml.graphdrawing.org/ you can read the graph nodes, structure and orientation from the xml file and then display it using flare (flash).

Check this forum for some examples: http://goosebumps4all.net/34all/bb/forumdisplay.php?fid=28

+14  A: 

Maybe try JavaScript Information Visualization Toolkit (JIT) or canviz

But actually, I am interested in that too. Does noone know something better?

+1  A: 

Javascript for displaying graphs (nodes + edges):


+3  A: 

Have you tried Raphael.js?

It seems to do what you need:


Here's a 'draggable' graph:


If your concern is specifically with layout, then you need to do some more research.

+13  A: 

I've just put together what you may be looking for: http://graphdracula.net

It's JavaScript with directed graph layouting, SVG and you can even drag the nodes around. Still needs some tweaking, but is totally usable. You create nodes and edges easily with JavaScript code like this:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

I used the previously mentioned Raphael JS library (the graffle example) plus some code for a force based graph layout algorithm I found on the net (everything open source, MIT license). If you have any remarks or need a certain feature, I may implement it, just ask!

Johann Philipp Strathausen
@Johann very nice; does it allow for directed edges?
Yes, directed edges are possible! Use g.addEdge("cherry", "apple", {"directed":true});
Johann Philipp Strathausen

It's commercial, but have you seen mxGraph?

Fabrizio C.
+1  A: 

As guruz mentioned, the JIT has several lovely graph/tree layouts, including quite appealing RGraph and HyperTree visualizations. I'd post a link, but as a n00b I'm restricted to one link per answer.

Also, I've just put up a super simple SVG-based implementation at github (no dependencies, ~125 LOC) that should work well enough for small graphs displayed in modern browsers.

Jack Rusher
+1  A: 

ProtoVis has some pretty nice features: http://vis.stanford.edu/protovis/

There is an example of a Force-Directed Graph listed in the examples page.

Gary Hodgson

I haven't used it myself, but dygraphs also looks promising.

+6  A: 

Protoviz is the answer to your problems http://vis.stanford.edu/protovis/

Protovis is great for statistical graphics.
Protovis is cool. It's by Jeffrey Heer, who also helped create Flare and Prefuse. Flare also works nicely, if you're OK with Flash.Specifically for graph visualization, look at Cytoscape web (http://cytoscapeweb.cytoscape.org/), based on Flare.
+2  A: 

Since noone else posted it yet, I want to suggest jqPlot to make this nice overview more complete. It's Open Source and produces stylish looking graphs. I like the interactive zoom. ;)

This question is about graphs, not charts.
Ollie G