GraphViz Charts

This section describes how to create graph charts using Image-Chart API.

Overview

GraphViz is a package of open source tools for visualizing connectivity graphs. You can create GraphViz graphs using the DOT language and your choice of layout engines.

GraphViz charts support a different set of required parameters:

• cht=gv[:<opt_engine>] Required: see GraphViz chart types

• chd Not used GraphViz rely on chl not chd to get its input data, we are following here the (weird) Google Image Charts API.

• chs Not used you do not need to specify a chart size, output image format will be a scalable vector graphic (svg).

• chl=<DOT_string> Required: The chart to draw, in DOT language notation. You can find the DOT language reference on the GraphViz website.

Simple Graph

cht=gv chl=graph { a -- b; b -- c; a -- c; d -- c; e -- c; e -- a; }

K6

cht=gv chl=graph { a -- b; b -- c; c -- d; d -- e; e -- f; a -- f; a -- c; a -- d; a -- e; b -- d; b -- e; b -- f; c -- e; c -- f; d -- f; }

Simple Digraph

cht=gv chl=digraph { a -> b; b -> c; c -> d; d -> a; }

Full Digraph

cht=gv chl=digraph { a -> b[label="0.2",weight="0.2"]; a -> c[label="0.4",weight="0.4"]; c -> b[label="0.6",weight="0.6"]; c -> e[label="0.6",weight="0.6"]; e -> e[label="0.1",weight="0.1"]; e -> b[label="0.7",weight="0.7"]; }

Showing A Path

cht=gv chl=graph { a -- b[color=red,penwidth=3.0]; b -- c; c -- d[color=red,penwidth=3.0]; d -- e; e -- f; a -- d; b -- d[color=red,penwidth=3.0]; c -- f[color=red,penwidth=3.0]; }

Note that there's also a shorthand method as follows:

cht=gv chl=graph { a -- b -- d -- c -- f[color=red,penwidth=3.0]; b -- c; d -- e; e -- f; a -- d; }

Subgraphs

Please note there are some quirks here, First the name of the subgraphs are important, to be visually separated they must be prefixed with cluster_ as shown below, and second only the cht=gv:dot and cht=gv:fdp layout support subgraphs (See the graph generation page for more information on the layout methods)

``` cht=gv chl=digraph { subgraph cluster_0 { label="Subgraph A"; a -> b; b -> c; c -> d; }

subgraph cluster_1 {
    label="Subgraph B";
    a -> f;
    f -> c;
}

} ```

Another Example of a Subgraph, In this example I group nodes together seperately from their edges, And also uses the graph attribute splines=line; to specify that edges should be drawn only as straight lines, no curves allowed.

``` cht=gv chl=graph { splines=line; subgraph cluster_0 { label="Subgraph A"; a; b; c }

subgraph cluster_1 {
    label="Subgraph B";
    d; e;
}

a -- e;
a -- d;
b -- d;
b -- e;
c -- d;
c -- e;

} ```

Record nodes

A record node is a box with fields represented by alternating rows of horizontal or vertical subboxes. Flipping between horizontal and vertical layouts is done by nesting fields in braces "{...}". (Learn more about record nodes.)

digraph structs { node [shape=record]; struct1 [label="<f0> left|<f1> middle|<f2> right"]; struct2 [label="<f0> one|<f1> two"]; struct3 [label="hello world |{ b |{c|<here> d|e}| f}| g | h"]; struct1:f1 -> struct2:f0; struct1:f2 -> struct3:here; }

Large Graphs

To make it easier to input large graph descriptions, One may group edges together with a set of braces, It may also help to lay the graph out left to right instead of top to bottom.

cht=gv chl=graph { rankdir=LR; // Left to Right, instead of Top to Bottom a -- { b c d }; b -- { c e }; c -- { e f }; d -- { f g }; e -- h; f -- { h i j g }; g -- k; h -- { o l }; i -- { l m j }; j -- { m n k }; k -- { n r }; l -- { o m }; m -- { o p n }; n -- { q r }; o -- { s p }; p -- { s t q }; q -- { t r }; r -- t; s -- z; t -- z; }

Advanced graph

The dot language is really powerful, they are lot of ways to customize your graph, if you wish to read more take a look at the dot guide.

digraph G { size ="4,4"; main [shape=box]; main -> parse [weight=8]; parse -> execute; main -> init [style=dotted]; main -> cleanup; execute -> { make_string; printf} init -> make_string; edge [color=red]; main -> printf [style=bold,label="100 times"]; make_string [label="make a\nstring"]; node [shape=box,style=filled,color=".7 .3 1.0"]; execute -> compare; }

Chart Types

Specifies a GraphViz chart. You can optionally specify a GraphViz engine (default is dot layout engine).

Syntax

cht=gv[:<opt_engine>]

If you want to specify a layout engine, include the semicolon : mark and specify one of the following strings for :

• dot: "hierarchical" or layered drawings of directed graphs. This is the default tool to use if edges have directionality.

• neato: "spring model'' layouts. This is the default tool to use if the graph is not too large (about 100 nodes) and you don't know anything else about it. Neato attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.

• fdp: "spring model'' layouts similar to those of neato, but does this by reducing forces rather than working with energy.

• twopi: radial layouts, after Graham Wills 97. Nodes are placed on concentric circles depending their distance from a given root node.

• circo: circular layout, after Six and Tollis 99, Kauffman and Wiese 02. This is suitable for certain diagrams of multiple cyclic structures, such as certain telecommunications networks.

Output format

Graphs can be rendered in different format using chof query parameter:

• chof=.png: png bitmap image file format (default)
• chof=.svg: svg vector image file format

Example below is a graph generated as a png image:

Here is the same graph generated as an svg image:

Known limitations

Here are some tips and known limitations in the current GraphViz charts:

• Animation through chan is not supported
• The graph attribute size should be not be used; chs is also not supported
• The maximum number of nodes is 200, and the maximum for edges is 400. Contact us if you need more
• Anti-aliasing, transparency, and alternate fonts are not supported
• The node attributes image and shapefile are not supported and will be silently ignored if present
• The graph attributes ratio, margin, and pad are not supported and will be ignored if present