SVGGraph Miscellaneous Graphs
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
EmptyGraph is a graph that does nothing with the data.
ArrayGraph is almost the opposite of the
- it breaks the data up and draws multiple graphs with it.
All of the graphs above 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
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
$settings['structure'] = array('key' => 0, 'value' => 1, 'end' => 3);
The default tooltip will display the difference between the
value values. The floating bar graphs support all the options
available for standard bar graphs, except for
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
value, and the size of the
bubble is provided by the
$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
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
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
value field, the box top and bottom are in the
bottom fields, and the top and bottom whisker values are provided
$settings['structure'] = array( 'key' => 0, 'value' => 1, 'top' => 3, 'bottom' => 4, 'wtop' => 5, 'wbottom' => 6, 'outliers' => array(7, 8) );
outliers field is an array of other data fields that contain
outlying points. These are displayed on the graph using
BoxAndWhiskerGraph options - Hide table
||Thickness of median line|
||Colour of median line|
||Dash pattern for median line|
||Dash pattern for whisker lines|
||Size of horizontal whisker line relative to box width|
||Gap between boxes|
||Radius of bar corners, or 0 for no rounding|
||Size of outlier marker|
||Shape of outlier marker|
||Colour of outlier marker|
||Colour of outlier marker outline|
||Thickness of outlier marker outline|
EmptyGraph is a bit different to the other types - it draws
an empty graph. You can set the graph values, colours, links, legend entries,
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.
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
||The number of columns to draw, or NULL to allow SVGGraph to decide|
||Options to be passed into the subgraphs, or NULL for no extra options|
||An array of datasets to be passed to each subgraph, or NULL for one dataset per subgraph|
||The type[s] of graph to draw|
||How to align the bottom row of the graph if there are not enough subgraphs to fill it|
The example below shows how some of these options can be used to draw quite complex graphs.
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', ];
array_graph_type option is making the first subgraph a
StackedBarGraph and the ninth a
with all others set to
NULL to use the default
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
array_graph_options option contains a load of empty arrays,
and one array with an option for 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
Overridden subgraph options
There are some options that the
ArrayGraph sets by default for
all its subgraphs, mainly to prevent confusing and unsightly behaviour:
keep_colour_order- set to
back_stroke_width- set to 0
back_colour- set to
title- set to
All of these options can be switched back using the