SVGGraph Horizontal Bar Graphs

« Return to SVGGraph page

SVGGraph currently contains these classes for drawing horizontal versions of the standard bar graphs: HorizontalBarGraph; HorizontalStackedBarGraph; HorizontalGroupedBarGraph. An example of each type is shown below.

HorizontalBarGraph
HorizontalStackedBarGraph
HorizontalGroupedBarGraph

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',
  '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('HorizontalBarGraph');

If you have already looked at the bar graph page, this code should be familiar - the only change is 'HorizontalBarGraph' in the call to $graph->Render. (I have also removed the 'project_angle' option, since that is only used by the vertical 3D bar graph.)

Change 'HorizontalBarGraph' to one of the other class names to draw that type instead.

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

These options are used by the horizontal and vertical bar graphs, and many 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
axis_min_h[3] NULL Minimum extent of X-axis
axis_max_h[3] NULL Maximum extent of X-axis
grid_division_h[3] NULL Grid interval on X-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[4] Horizontal axis label
label_v[4] Vertical axis label
label_x[4] X-axis label
label_y[4] Y-axis label
label_space[4] 6 Spacing around axis labels
label_font[4] sans-serif Font for axis labels
label_font_size[4] 10 Font size for axis labels
label_font_weight[4] normal Font weight for axis labels
label_colour[4] rgb(0,0,0) Colour for axis label text
Horizontal bar graph options

« Back to top of page Line and scatter graphs »