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.

[simple graph]

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

[circular layout]

Both of the above graphs were drawn in circular style - we try to expose the structure of the graph by grouping related nodes and displaying them in circles. This is one of the three layout styles you can use.

[hierarchical layout]

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

[spring-embedded layout]

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

The API for controlling all this is very straightforward. The image to the right was generated with this URL:
http://chart.ravenbrook.com/chart?
                    chs=180x150
                 &cht=nh
                 &chl=foo|bar
                 &che=1,2|3,4|5,0
Alternatively, you can the request.

[API example]

Five parameters are supported. 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 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, and node 5 to node 0.

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;

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

  • do more work on the spring-embedded layout;

  • give you control over node and edge colouring;

  • support other drawing styles for both nodes (e.g. ellipses) and edges (e.g. dashed, or with arrowheads);

  • support character sets other than Latin-1.

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.

Contact us by writing to chart@ravenbrook.com.

[made by lisp]