chart.ravenbrook.com

chart.ravenbrook.com (contact: chart@ravenbrook.com) is a server for converting graph specifications into images in either png or pdf format. It's being used to generate all but one of the images you see here.

Here's an example of a graph. It has five nodes (or vertices) and ten edges.

And here's a larger example. Click on the image to see it drawn to a larger scale.

In the hierarchical style, we place the nodes so that edge sources will be nearer the top of the image than destinations.

Finally, in spring-embedded layouts you can think of edges as springs and nodes as repelling magnets.

http://chart.ravenbrook.com/chart?
                    chs=180x150
                 &cht=nh
                 &chl=foo|bar
                 &che=1,2|3>4|5,0

Five basic parameters define the graph its size, layout style, and output format. Each one is optional (although the image you'll get from drawing a graph which has no nodes or edges won't be very exciting).

• chs specifies the image size, width by height in pixels, defaulting to 600x600;

• chfmt specifies the output format: png (the default) or pdf;

• cht specifies the drawing style: nc for circular (the default), nh for hierarchical, ns for spring-embedded;

• chl lists labels for the nodes. If the edges require more nodes then you've labelled, then any remaining nodes will be drawn without any text. In the example above, nodes 0 and 1 are labelled and the other four are blank. Labels may be UTF-8 and URL encoded, allowing you to include newlines and any other characters which would otherwise be a nuisance to pass;

• che lists edges, in source/destination pairs. The example above says to connect node 1 to node 2, node 3 to node 4 directionally, and node 5 to node 0. Separate a source and destination with a comma or hyphen for a non-directional edge, with > for a directional edge which points at the destination, with < with an edge which points at the source, with <> for an edge which points both ways.

Two further parameters give finer control over node and edge appearance, by defining sequences of "node classes" and "edge classes". Each class has an implicit number, from 0 upwards. The current class number for nodes is initially 0 and this is changed by appending a colon and a number to the end of any node label. So "chl=foo|bar|baz" defines three nodes in class 0; and "chl=foo:42|bar:13|baz" defines one node in class 42 and two in class 13. Edges are configured in exactly the same way with their own sequence of classes.

In the class specifications, you can miss components out and get their default values instead, you can abbreviate the values for node shape and edge style (so long as you're not ambiguous), and you can drop trailing commas. A colour is either a name such as green or orange or mediumorchid, or 6 hexadecimal digits representing RRGGBB values (e.g. ff0000 for red).

• chnc defines node classes. Each class takes the form colour,shape. The shapes currently supported are rectangle, ellipse, square or circle. The default is a yellow rectangle. The example to the right was generated with "chl=1|2|3:1|4:2&chnc=|green|,c".

• chec defines edge classes. Each class takes the form colour,width,style. Widths are small integers (1 or 2 or suchlike). The styles currently supported are solid, dotted and dashed. The default is blue, width one, solid). The example to the left was generated with "che=0-1|2-3:1|3-4:2&chec=|green,5|,1,dashed".

Limitations: 16k data for any request; no more than 500 nodes or 500 edges; no more than 1 megapixel for the image.

Your request data will be kept in temporary logs, for no more than one week, to allow us to monitor traffic and debug problems. It will not be made available to anybody else.

Please feel welcome to submit your favourite graphs to the user gallery which we're assembling.

We'd be interested to know how useful you find this site, and what might be done to improve it. For example (but not limited to), we might:

• turn graph specifications into lists of node co-ordinates rather than images; or

• expose the parameters which fine-tune each of the three layout styles.

By the way, in the last year and partially as a result of user feedback, we've made the following changes: improved spring-embedded layout, node and edge drawing styles and classes, arrowheads on edges, UTF-8 support for character sets beyond Latin-1, and output to pdf.

We'd be really happy to talk to you about other uses for our graph layout and display libraries, and about the licenses under which they might be released. We have support for several features which make more sense in an interactive desktop application, such as the improvements listed above and also:

• none of the above limitations on size and complexity;

• incremental layout;

• selecting, hiding, tooltip text, popup menus, node dragging;

• associating images with nodes; and

• zooming.

Click on the lizard. Contact us by writing to chart@ravenbrook.com.