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:

DoughRayMeSoFarLardTea-60-40-200204060
FloatingBarGraph
-20-100102030405060DoughRayMeSoFarLardTea
HorizontalFloatingBarGraph
DoughRayMeSoFarLardTea-30-15015304560
BubbleGraph
DoughRayMeSoFarLardTea-40-20020406080
BoxAndWhiskerGraph
10:0011:0012:0013:0014:0015:0016:00020406080100
CandlestickGraph

Empty and array graphs

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

There is an EmptyGraph here
EmptyGraph

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

DoughMeFarTea-20-1001020304050DoughDoughRayRayMeMeSoSoFarFarLardLardTeaTeaDoughDoughRayRayMeMeSoSoFarFarLardLardTeaTeaDoughMeFarTea-40-30-20-100102030
ArrayGraph

Most of the graphs above are using the same data array (shown below), but the different structures and options used for each graph determine how it is displayed.

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

Required fieldUsed for
keyX-axis value
valueFirst end of bar
endSecond end of bar
$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.

Required fieldUsed for
keyBubble centre point on X-axis
valueBubble centre point on Y-axis
areaArea of bubble in Y-axis units
$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.

Required fieldUsed for
keyX-axis value
valueMedian line value
topValue for top of box
bottomValue for bottom of box
wtopValue for top whisker
wbottomValue for bottom whisker
$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

OptionDefaultDescription
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

Candlestick Graph

The CandlestickGraph is used to display stock or similar price fluctuations. It requires four data fields - the closing price in the value field, opening price in the open field, and the minimum and maximum values in the low and high fields.

Required fieldUsed for
keyX-axis value
valueClosing price
openOpening price
highMaximum price
lowMinimum price
$settings['structure'] = array(
  'key' => 0, 'value' => 1, 'open' => 2,
  'high' => 3, 'low' => 4,
);

The opening value would normally be the same as the closing value from the previous entry, though SVGGraph does not enforce this. The boxes for rising and falling values are usually displayed in different colours - to achieve this, SVGGraph uses colours assigned to different datasets. This means the colour for rising values (where value is greater than open) is from dataset 0 and the colour for falling values is from dataset 1.

The example graph at the top of the page uses two colour ranges for its rising and falling values:

$graph->colourRangeHexHSL(0, '#338', '#88c'); // rising
$graph->colourRangeHexHSL(1, '#c30', '#c66'); // falling

The candlestick graph supports most bar graph options, along with these extra options:

CandlestickGraph options - Hide table

OptionDefaultDescription
wick_stroke_width 2 Thickness of wick lines
wick_dash NULL Dash pattern for wick lines
CandlestickGraph 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

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

01234502004006008002354103501243214052354103012453052413052410306090120150180210240012345301245
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 »

This site uses cookies - details here.