Introduction

Canviz began as a proof of concept—is it possible to draw Graphviz graphs to a browser canvas? I thought a good place to start would be to try to write an example that could render all the sample graphs included with Graphviz. As of October 2008, Canviz can do this. You can see it in action on the demo page. This wiki page explains how to get this example working on your system.

Requirements

The example requires:

a supported web browser
Graphviz

Setup

Download and extract the latest release of Canviz.
Open index.html in a web browser.

Alternate Setup

If you'd rather build from source:

Check out the Canviz trunk. You'll need Subversion 1.5 or greater.
Run make examples in the source directory. Besides Graphviz, this requires standard UNIX utilities like make, bash, awk, dirname, find and which, so you need a UNIX-like operating system, or Cygwin on Windows.
Open index.html in a web browser.

Comment by Rockps...@gmail.com, Jul 15, 2010

I'm trying to access canviz from a js file. When I make a call to myCanviz.load("test.dot")...

I'm getting an error on line 464

-> $('debug_output') is null

If I comment out that line I get an error at line 396

-> this.getAttr('bb')

bb does not exist in this.

Tracing through the parsing code, the graph seems to be getting parsed ok. Any clue on this bb attribute? And where is $('debug_output') supposed to get set? I don't see it defined anywhere in canviz.js

Comment by project member ryandesi...@gmail.com, Jul 16, 2010

@Rockpsl76: canviz.js assumes there is a DOM element on the page that has the id "debug_output", and writes its debug output there. It's clearly wrong for canviz.js to assume this, but that's what it does, for now. Create a div with that id on your page if you'd like to see debug output, and if you don't, then commenting out those lines could be fine. Suggestions on how to fix this generally are appreciated, though the discussion group would be a better place than these wiki comments to have that discussion.

bb should exist ("bb" means "bounding box"). What kind of file are you passing to canviz -- is it a file that has been processed with "dot -Txdot" (or "neato -Txdot", etc.)? It needs to be.

Comment by Rockps...@gmail.com, Jul 19, 2010

Thanks. Running it through dot (and/or neato) did the trick. Works great :) I just popped in a debug_output div and hid it instead of mucking with your code.

Comment by oldrat...@gmail.com, Sep 7, 2011

Can not Run make to Setup demo. my OS is Ubuntu 10.04. no directory /usr/share/graphviz/graphs, and i have searched graphviz/graphs dirtory in whole file system. Help~

error msg: $ make find: `/usr/share/graphviz/graphs': this directory is not existed find /usr/share/graphviz/graphs -type f -name '.gif' -or -name '.jpg' -or -name '.png' -print0 | xargs -0 -t -n 1 -I % cp % ./graphs/images find: `/usr/share/graphviz/graphs': this directory is not existed

Comment by project member ryandesi...@gmail.com, Dec 10, 2011

@oldratlee: A download of Canviz 0.1 has been posted, including pre-generated examples; it will be simpler to download that instead of using the Makefile. If you still want to use the Makefile: I expected the graphs directory to have been provided by your Graphviz distribution. If it's in a different location, you can edit the Makefile. If it's nowhere, you can download the Graphviz source code from the Graphviz web site and get the graphs from there.

► Sign in to add a comment