Skip to content

Graph Viz 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

chart

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

K6

chart

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

chart

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

Full Digraph

chart

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

chart

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:

chart

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)

chart

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.

chart

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.)

chart

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.

chart

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

Known limitations

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

  • Output image format is svg format, not png.
  • Animation through chan are 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.
  • 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.

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.