SVGGraph Miscellaneous Graphs

« Return to SVGGraph page

Skip to:

Some of the graph types SVGGraph supports don't fit into the main categories, so they are bundled together on this page.

Structured data graphs

These graphs require the use of structured data, since they need more than X and Y coordinates to draw their contents:


Empty and array graphs

The EmptyGraph is a graph that does nothing with the data.

There is an EmptyGraph here

The ArrayGraph is almost the opposite of the EmptyGraph - it breaks the data up and draws multiple graphs with it.


All of the graphs above (except for the EmptyGraph) are using the same data array (shown below), but the different structures and options used for each graph determine what it shows.

$values = array(
  //     0       1    2   3    4   5    6   7   8
  array('Dough', 30,  50, 40,  20, 49,  10),
  array('Ray',   50,   3, 55,  40, 60,  30,  7, 15),
  array('Me',    40, -60, 45,  30, 58,  10, 65),
  array('So',    25,  15, 40,  22, 45,  18),
  array('Far',   45,  25, 50,  35, 58,  28),
  array('Lard',  35,  25, 39,  31, 44,  22),
  array('Tea',  -20,  45,  3, -28, 14, -32),

Floating Bar Graphs

The FloatingBarGraph and HorizontalFloatingBarGraph types of graph are useful for displaying ranges of data. The structure value field specifies the first data point, and the second is provided by the end field.

$settings['structure'] = array('key' => 0, 'value' => 1, 'end' => 3);

The default tooltip will display the difference between the end and value values. The floating bar graphs support all the options available for standard bar graphs, except for bar labels.

Bubble Graph

Bubble graphs are similar to scatter graphs, but show a filled circle instead of a marker. The X and Y position of the bubble is given by the key and value, and the size of the bubble is provided by the area field.

$settings['structure'] = array('key' => 0, 'value' => 1, 'area' => 2);
$settings['bubble_scale'] = 3;

The size of the bubble is proportional to the Y scale of the graph, but this means that the bubbles can appear too large or small. The bubble_scale option can be used to increase or decrease the size of all bubbles.

SVGGraph fills negative bubbles with a check pattern, as can be seen in the “Me” entry in the example graph at the top of the page.

Box and Whisker Graph

The BoxAndWhiskerGraph displays statistical data, and I'll leave it to the Wikipedia page to provide a proper description.

Each box and its whiskers requires five pieces of data - the median is supplied in the value field, the box top and bottom are in the top and bottom fields, and the top and bottom whisker values are provided in the wtop and wbottom fields.

$settings['structure'] = array(
  'key' => 0, 'value' => 1,
  'top' => 3, 'bottom' => 4,
  'wtop' => 5, 'wbottom' => 6,
  'outliers' => array(7, 8)

The outliers field is an array of other data fields that contain outlying points. These are displayed on the graph using markers.

The boxes and outliers on the graph can be configured using the options for bar graphs and scatter graphs with these extra and modified options:

BoxAndWhiskerGraph options - Hide table

median_stroke_width 2 Thickness of median line
median_colour NULL Colour of median line
median_dash NULL Dash pattern for median line
whisker_dash "2,2" Dash pattern for whisker lines
whisker_width 0.75 Size of horizontal whisker line relative to box width
bar_space 20 Gap between boxes
bar_round 0 Radius of bar corners, or 0 for no rounding
marker_size 2 Size of outlier marker
marker_type "circle" Shape of outlier marker
marker_colour "none" Colour of outlier marker
marker_stroke_colour "black" Colour of outlier marker outline
marker_stroke_width 1 Thickness of outlier marker outline
BoxAndWhiskerGraph options

Empty Graph

The EmptyGraph is a bit different to the other types - it draws an empty graph. You can set the graph values, colours, links, legend entries, but EmptyGraph will ignore them. This might seem useless, but you can draw shapes and custom labels on it, and you can also set the graph background, title, edge and metadata.

Array Graph

The ArrayGraph is another strange graph, in that it doesn't really draw anything itself. What it actually does is divide the graph space up and create subgraphs, each with its own data to draw.

ArrayGraph options - Hide table

array_graph_columns NULL The number of columns to draw, or NULL to allow SVGGraph to decide
array_graph_options NULL Options to be passed into the subgraphs, or NULL for no extra options
array_graph_dataset NULL An array of datasets to be passed to each subgraph, or NULL for one dataset per subgraph
array_graph_type "PieGraph" The type[s] of graph to draw
array_graph_align NULL How to align the bottom row of the graph if there are not enough subgraphs to fill it
ArrayGraph options

The example below shows how some of these options can be used to draw quite complex graphs.

Bar and pie graphs in ArrayGraph

The options used to draw this graph are shown below. I've arranged the option arrays to match the 4×3 layout that SVGGraph has chosen for the subgraphs, since it is a lot easier to read.

$settings = [
  'auto_fit' => true,

  'array_graph_type' => [
    'StackedBarGraph', null, null, null,
    null, null, null, null,
    'HorizontalBarGraph', null,

  'array_graph_dataset' => [
    [0, 1, 2], 2, 3, 4,
    5, 6, 7, 8,
    9, 10

  'array_graph_options' => [
    [], [], [], [],
    [], [], [], [],
    ['axis_text_angle_h' => 90,], [],

  'data_label_colour' => '#fff',

The array_graph_type option is making the first subgraph a StackedBarGraph and the ninth a HorizontalBarGraph with all others set to NULL to use the default PieGraph.

The array_graph_dataset option assigns the first subgraph datasets 0, 1 and 2, then assigns the datasets 2-10 to the next nine subgraphs. The number of subgraphs shown depends on the number of entries in this option and the number of datasets available (taking into account any datasets disabled using the dataset option).

The array_graph_options option contains a load of empty arrays, and one array with an option for the HorizontalBarGraph. The axis_text_angle_h option could have been put in the outer settings array instead, but then it would have applied to all of the subgraphs in the ArrayGraph, rotating the axis text for the StackedBarGraph as well.

Overridden subgraph options

There are some options that the ArrayGraph sets by default for all its subgraphs, mainly to prevent confusing and unsightly behaviour:

All of these options can be switched back using the array_graph_options option.

« Back to top of page Axis and grid options »