SVGGraph Miscellaneous Graphs

« Return to SVGGraph page

Skip to:

• Floating bar graphs
• Bubble graph
• Box and whisker graph
• Candlestick graph
• Empty graph
• Array graph

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.

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

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.

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

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.

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

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.

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',
];

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:

• keep_colour_order - set to true
• back_stroke_width - set to 0
• back_colour - set to "none"
• title - set to NULL

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

« Back to top of page Axis and grid options »

Copyright © 2021, Goat 1000