Friday, February 10th, 2006

New Javascript/Canvas Graph library

Category: Canvas, JavaScript, Library

Aslak Hellesøy and Dave Hoover have put together a JavaScript library that can draw interactive graphs (as in nodes, not as in charts).

The library currently has three functional layers:

  • The graph model (Graph, Node and edges)
  • Layout algorithms: (Graph.Layout.*)
  • Rendering schemes: (Graph.Renderer.*)

Usage

javascript

  1. var g = new Graph();
  2.  
  3. g.addEdge($('fred'), $('wilma'));
  4. g.addEdge($('wilma'), $('dino'));
  5. g.addEdge($('fred'), $('barney'));
  6. g.addEdge($('wilma'), $('barney'));
  7. g.addEdge($('aslak'), $('fred'));
  8. g.addEdge($('aslak'), $('dave'));
  9. g.addEdge($('patty'), $('aslak'));
  10. g.addEdge($('barney'), $('patty'));
  11.  
  12. var layouter = new Graph.Layout.Spring(g);
  13. layouter.layout();
  14.  
  15. var renderer = new Graph.Renderer.Basic($('people'), g);
  16. renderer.draw();

Canvas Graph Library

In related news, Benjamin Joffe posted an example on writing to a canvas element.

Posted by Dion Almaer at 9:46 am
14 Comments

+++--
3.7 rating from 96 votes

14 Comments »

Comments feed TrackBack URI

Dammit, there goes my weekend. Just when I get a weekend where nothing cool comes out that makes me want to take it apart and see what makes it tick this comes out! :)

Seriously, this looks very cool on the surface. If this works as good as the article reads this could be cool for mapping all these new “semantic web” nodes.

=C=
Cal Evans
http://blog.calevans.com

Comment by Cal Evans — February 10, 2006

Should I be able to interact with this graph? It always comes across as a static element in Safari and the latest Firefox.

Comment by Gregory — February 10, 2006

Site is down, anyone have a mirror?

Comment by Quirk — February 11, 2006

Looks like the entire sits is not down. Only that page has a 500 Internal server error. For the javascript code checkout http://webfx.eae.net/dhtml/chart/chart.html

Comment by inspiredbylife — February 12, 2006

Hate to mention this guys, but the first link is definately not available – keep getting a 500 response for: http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-canvas-graph-library

Might be sensible to remove this or replace with an alternate link!!

Comment by Dave Probert — February 12, 2006

Hi,

I have seen a javascript Canvas / Graph library on http://www.openjacob.org
or http://www.openjacob.org/draw2d.html

….the target of the lib is a “Visio like javascript SDK” library under LGPL

greetings
Andreas Herz

Comment by Andreas Herz — November 21, 2006

Hi,

Open-jacob draw2d seems to be a “moving target”.
API is still in change. But at the moment the API is cool.

….fine

David

Comment by David Flum — November 23, 2006

we have used the open jacob sdk to develop a workflow
editor based on the “jacob.blooper” bugtracker starter kit
and it works perfect.

I think it is not a “moving target”.

thanks

Mark

Comment by Mark Summerfield — December 12, 2006

Here’s a mirror of the code:

http://snipplr.com/view/1950/graph-javascript-framework-version-001/

Comment by Jonathon — January 8, 2007

Hi,

Open jacob has a AJAX workflow editor too. Fine and fast
Congratulation!

thx to the jacob team.

mark

Comment by Mark Antoni — January 26, 2007

Hi,

Looks great, neat and simple.
Doesnt work for IE 7.0?. Is there any change in the script needed.

Thanks
Prasanna

Comment by Prasanna — April 27, 2007

mail the error to the developer of draw2d!

greetings

Comment by draw2d developer — May 21, 2007

Draw2D + Yahoo UI library

Demo: http://www.openjacob.org/draw2d/single/YahooUI_integration/index.html

Greetings

Andreas

Comment by FreeGroup — August 8, 2007

Congratulation!

thx to the jacob team.

wang

Comment by 引越し — September 17, 2007

Leave a comment

You must be logged in to post a comment.