Ajaxian

Friday, February 10th, 2006

New Javascript/Canvas Graph library

Category: Canvas, JavaScript, Library

<>p>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

PLAIN TEXT

JAVASCRIPT:

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

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

Related Content:

• Get ready for HTML5 and canvas elements
  The HTML5 canvas element is a new way to display active graphics and manipulate images with JavaScript. Find out what the new element will mean for...
• Breaking OpenLaszlo loose from XML data
  OpenLaszlo is a development platform that allows you to create rich internet applications which execute on several runtimes, including Flash and...
• Silverlight: Web services rich client for the browser
  Microsoft's latest entry into the rich client market, Silverlight, promises to challenge Flash and Java in the browser-based Web services consumer...
• Silverlight Learning Guide: Working with JavaScript
  This section of the Silverlight Learning Guide covers the basics of working with JavaScript, a key programming language for Silverlight...
• XGR
  Graph Edit XML...

Posted by Dion Almaer at 9:46 am
14 Comments

3.8 rating from 91 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