SVGGraph Miscellaneous Graphs

« Return to SVGGraph page

Skip to:

SVGGraph also includes these graphs that use structured data to display more than simple X and Y coordinates:

FloatingBarGraph
HorizontalFloatingBarGraph
BubbleGraph
BoxAndWhiskerGraph

All of these graphs are using the same data array (shown below), but the different structures used for each graph determine what is shown on the graphs.

$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

OptionDefaultDescription
median_stroke_width 2 Thickness of 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
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

« Back to top of page Axis and grid options »