SVGGraph Bar Graphs

« Return to SVGGraph page

SVGGraph currently contains these classes for drawing bar graphs: BarGraph; Bar3DGraph; StackedBarGraph; GroupedBarGraph. An example of each type is shown below.

BarGraph
Bar3DGraph
StackedBarGraph
GroupedBarGraph

Example code

Here are the settings and PHP code used to generate the graphs above:

require_once('includes/SVGGraph.php');
 
$settings = array(
  'back_colour' => '#eee',  'stroke_colour' => '#000',
  'back_stroke_width' => 0, 'back_stroke_colour' => '#eee',
  'back_image' => 'images/svgbg.png',
  'axis_colour' => '#333',  'axis_overlap' => 2,
  'axis_font' => 'Georgia', 'axis_font_size' => 10,
  'grid_colour' => '#666',  'label_colour' => '#000',
  'pad_right' => 20,        'pad_left' => 20,
  'link_base' => '/',       'link_target' => '_top',
  'project_angle' => 45,    'minimum_grid_spacing' => 20
);
 
$values = array(
 array('Dough' => 30, 'Ray' => 50, 'Me' => 40, 'So' => 25, 'Far' => 45, 'Lard' => 35),
 array('Dough' => 20, 'Ray' => 30, 'Me' => 20, 'So' => 15, 'Far' => 25, 'Lard' => 35,
  'Tea' => 45)
);
 
$colours = array(array('red','yellow'), array('blue','white'));
$links = array('Dough' => 'jpegsaver.php', 'Ray' => 'crcdropper.php',
  'Me' => 'svggraph.php');
 
$graph = new SVGGraph(300, 200, $settings);
$graph->colours = $colours;
 
$graph->Values($values);
$graph->Links($links);
$graph->Render('BarGraph');

This is not the actual code used - I have adapted it to make it easier to copy and paste it into a new file to try for yourself. To change the type of graph generated, change 'BarGraph' in the final call to $graph->Render to one of the other types.

The StackedBarGraph example uses a different set of colours:

$colours = array(
 array('red','yellow','red','h'),
 array('blue','cyan','blue','h')
);

The final 'h' in the array of colours tells SVGGraph to create a horizontal gradient.

Settings

These options are common to all graph types:

OptionDefaultDescription
title NULL Contents of title tag, or NULL for none
description NULL Contents of desc tag, or NULL for none
stroke_colour rgb(0,0,0) Colour of graph lines
stroke_width 1 Thickness of graph lines, 0 disables line drawing
back_colour rgb(240,240,240) Background colour of graph
back_round 0 Radius of rounded background edge
back_stroke_width 1 Thickness of background edge
back_stroke_colour rgb(0,0,0) Colour of background edge
back_image NULL Image to use for background (NULL for none). See the SVGGraph background image page for details.
back_image_width 100% Width of background image
back_image_height 100% Height of background image
back_image_opacity 1.0 Opacity of background image (0.0-1.0)
back_image_top 0 Top offset of background image
back_image_left 0 Left offset of background image
back_image_mode auto Background image display method. Options are:
auto
image will be uniformly scaled to fit in width and height;
tile
image will be tiled in blocks using width and height;
stretch
image will be stretched to fit width and height
pad_top 10 Space at top of graph
pad_bottom 10 Space at bottom of graph
pad_left 10 Space to left of graph
pad_right 10 Space to right of graph
link_base Prepended to all links
link_target _blank Link target frame
namespace false Option to use the svg: namespace prefix
doctype false Option to output the DOCTYPE
show_tooltips true Enables display of tooltips over graph markers
tooltip_colour black Tooltip text/border colour
tooltip_stroke_width 1 Tooltip border thickness
tooltip_back_colour #ffffcc Tooltip rectangle background colour
tooltip_font sans-serif Font for tooltips
tooltip_font_weight normal Tooltip font weight
tooltip_font_size 10 Tooltip font size
tooltip_padding 3 Tooltip rectangle padding
tooltip_round 0 Radius of rounded tooltip corner
tooltip_shadow_opacity 0.3 Opacity of tooltip shadow (0.0-1.0, 0 disables shadow)
tooltip_offset 10 Distance between cursor and tooltip
compat_events false Set to TRUE to fall back to inline event handlers, required by Adobe IE plugin
graph_title NULL Title displayed on the graph
graph_title_font sans-serif Font for graph title
graph_title_font_size 12 Font size for graph title
graph_title_font_weight normal Font weight for graph title
graph_title_space 10 Spacing around graph title
graph_title_colour rgb(0,0,0) Colour of graph title
graph_title_position top Where to show graph title ("top", "bottom", "left", "right")
legend_entries NULL Array of entries for the legend
legend_position top right Position of the legend. Supports "top", "bottom", "left", "right", "inner", "outer" and pairs of X and Y offsets
legend_stroke_width 1 Thickness of legend border
legend_stroke_colour rgb(0,0,0) Colour of legend border
legend_back_colour rgb(255,255,255) Colour of legend background
legend_round 0 Radius of rounded corners for legend border
legend_font sans-serif Font for legend entries
legend_font_weight normal Font weight for legend entries
legend_font_size 10 Font size for legend entries
legend_font_adjust 0.6 Ratio of font width to height
legend_colour rgb(0,0,0) Colour of legend entries text
legend_padding 5 Amount of spacing between entries in legend
legend_entry_width 20 Width of legend entry box
legend_entry_height 20 Height of legend entry box
legend_title Title for legend
legend_title_font NULL Font for legend title (NULL = use legend_font)
legend_title_font_size NULL Font size for legend title (NULL = use legend_font_size)
legend_title_font_weight bold Font weight for legend title
legend_title_font_adjust NULL Ratio of font width to height (NULL = use legend_font_adjust)
legend_title_colour NULL Colour of legend title (NULL = use legend_colour
legend_text_side right Which side of the entry box the text should be on ("left", "right")
legend_draggable true Makes the legend draggable with the mouse
legend_autohide false Makes the legend hide when the cursor is over it
Global options

The following table lists the other options relevant to the bar graph types - many of these options are also used by the line and scatter graphs:

OptionDefaultDescription
show_grid true Grid on/off option
show_axes true Axes on/off option
show_divisions true Axis division points on/off
show_axis_text_h true Horizontal axis division numbering or labels on/off
show_axis_text_v true Vertical axis division numbering on/off
grid_colour rgb(220,220,220) Colour of grid lines
axis_colour rgb(0,0,0) Colour of axis lines
axis_font monospace Font for axis division text
axis_font_size 10 Axis division font size
axis_font_adjust 0.6 Approx ratio of font width to height
axis_overlap 5 Amount to extend axes past graph area
axis_text_colour rgb(0,0,0) Colour of axis division text
division_size 3 Length of division lines
division_colour NULL Colour of division lines, or NULL to use axis colour
minimum_grid_spacing 15 Minimum distance between grid/axis lines
minimum_grid_spacing_h NULL Minimum distance between divisions on horizontal axis
minimum_grid_spacing_v NULL Minimum distance between divisions on vertical axis
bar_space[1] 10 Space between bars
group_space[2] 3 Space between bars of group
project_angle[3] 30 Angle between bar side edges and horizontal axis
grid_enclose_h[4] false If true, the horizontal grid will enclose all data points
grid_enclose_v[4] true If true, the vertical grid will enclose all data points
axis_min_h[5] NULL Minimum extent of X-axis
axis_max_h[5] NULL Maximum extent of X-axis
axis_min_v[5] NULL Minimum extent of Y-axis
axis_max_v[5] NULL Maximum extent of Y-axis
grid_division_h[5] NULL Grid interval on X-axis
grid_division_v[5] NULL Grid interval on Y-axis
show_subdivisions false Enables axis subdivisions
subdivision_size 2 Size of axis subdivision markings
subdivision_colour division_colour Colour of axis subdivision markings
show_grid_subdivision false Enables grid subdivisions
grid_subdivision_colour rgba(220,220,220,0.5) Colour of grid subdivision lines
minimum_subdivision 5 Minimum distance between subdivisions
subdivision_h NULL Subdivision grid interval on X-axis
subdivision_v NULL Subdivision grid interval on Y-axis
label_h[6] Horizontal axis label
label_v[6] Vertical axis label
label_x[6] X-axis label
label_y[6] Y-axis label
label_space[6] 6 Spacing around axis labels
label_font[6] sans-serif Font for axis labels
label_font_size[6] 10 Font size for axis labels
label_font_weight[6] normal Font weight for axis labels
label_colour[6] rgb(0,0,0) Colour for axis label text
Bar graph options

« Back to top of page Horizontal bar graphs »