SVGGraph Horizontal Bar Graphs

« Return to SVGGraph page

Skip to:

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

HorizontalBarGraph
HorizontalStackedBarGraph
HorizontalGroupedBarGraph
PopulationPyramid

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.

The PopulationPyramid class

The population pyramid (also known as an “age pyramid” or “age picture diagram”) is a modified version of the horizontal stacked bar graph. Instead of the values in each dataset stacking from the axis at the left of the graph, the axis is in the centre and datasets alternate from left to right of the axis, stacking outwards.

The population pyramid in the example at the top of the page is using some realistic census data instead of the contrived values used for the other graphs.

Settings

These options are common to all graph types.

General options + Show table

This table lists the options that are common to all the grid-based graph types - the options for grid spacing, axis labelling, etc.

Grid-based graph options - Hide table

OptionDefaultDescription
show_grid true Grid on/off option
show_grid_h true Show horizontal grid lines
show_grid_v true Show vertical grid lines
show_grid_subdivisions false Enables grid subdivisions
show_axes true Axes on/off option
show_axis_h true Show the horizontal axis line or not
show_axis_v true Show the vertical axis line or not
show_divisions true Axis division points on/off
show_subdivisions false Enables axis subdivisions
show_axis_text_h true Horizontal axis division numbering or labels on/off
show_axis_text_v true Vertical axis division numbering on/off
decimal_digits NULL Set to a number of digits to show for axis text
decimal_digits_x NULL Set to a number of digits to show for X axis text
decimal_digits_y NULL Set to a number of digits to show for Y axis text
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
minimum_subdivision 5 Minimum distance between subdivisions
minimum_units_y 0 The minimum units to display on the Y axis. Values other than 0 or 1 may cause scaling problems
axis_min_h[3] NULL Minimum extent of X-axis
axis_max_h[3] NULL Maximum extent of X-axis
axis_min_v[3] NULL Minimum extent of Y-axis
axis_max_v[3] NULL Maximum extent of Y-axis
grid_left NULL Position of left side of grid and axis area, overriding automatic positioning.
grid_top NULL Position of top of grid area, overriding automatic positioning.
grid_right NULL Position of right side of grid area. Use a negative value to measure from the right of the SVG document.
grid_bottom NULL Position of bottom of grid area. Use a negative value to measure from the bottom of the SVG document.
grid_division_h[3] NULL Grid interval on X-axis
grid_division_v[3] NULL Grid interval on Y-axis
subdivision_h NULL Subdivision grid interval on X-axis
subdivision_v NULL Subdivision grid interval on Y-axis
grid_back_colour NULL Colour of grid area background. Supports gradients and patterns.
grid_back_opacity 1 Opacity of grid background fill
grid_back_stripe false If enabled, displays striped background at grid intervals
grid_back_stripe_colour rgb(240,240,240) Colour of grid stripes. Either a single colour to alternate with clear, or an array of colours to cycle through. Supports gradients and patterns.
grid_back_stripe_opacity 1 Opacity of grid stripes
grid_colour rgb(220,220,220) Colour of grid lines
grid_colour_h NULL Colour of grid lines from horizontal axis
grid_colour_v NULL Colour of grid lines from vertical axis
grid_dash NULL Grid lines dash pattern
grid_dash_h NULL Grid lines dash pattern from horizontal axis
grid_dash_v NULL Grid lines dash pattern from vertical axis
grid_subdivision_colour rgba(220,220,220,0.5) Colour of grid subdivision lines
grid_subdivision_colour_h NULL Colour of grid subdivision lines from horizontal axis
grid_subdivision_colour_v NULL Colour of grid subdivision lines from vertical axis
grid_subdivision_dash NULL Grid subdivision lines dash pattern
grid_subdivision_dash_h NULL Grid subdivision lines dash pattern from horizontal axis
grid_subdivision_dash_v NULL Grid subdivision lines dash pattern from vertical axis
axis_colour rgb(0,0,0) Colour of axis lines
axis_stroke_width 2 Width of axis lines
axis_overlap 5 Amount to extend axes past graph area
axis_font monospace Font for axis division text
axis_font_h NULL Font for horizontal axis division text
axis_font_v NULL Font for vertical axis division text
axis_font_size 10 Axis division font size
axis_font_size_h NULL Axis division font size for horizontal axis
axis_font_size_v NULL Axis division font size for vertical axis
axis_font_adjust 0.6 Approx ratio of font width to height
axis_font_adjust_h NULL Approx ratio of font width to height for horizontal axis
axis_font_adjust_v NULL Approx ratio of font width to height for vertical axis
axis_text_position outside Position of axis text relative to grid area ("inside" or "outside")
axis_text_position_h NULL Position of axis text for horizontal axis
axis_text_position_v NULL Position of axis text for vertical axis
axis_text_colour rgb(0,0,0) Colour of axis division text
axis_text_colour_h NULL Colour of horizontal axis division text
axis_text_colour_v NULL Colour of vertical axis division text
axis_text_space 2 Space between axis division text and axis/divisions
axis_text_space_h NULL Space between horizontal axis division text and axis/divisions
axis_text_space_v NULL Space between vertical axis division text and axis/divisions
axis_text_angle_h 0 Angle of text on horizontal axis (in degrees, positive or negative)
axis_text_angle_v 0 Angle of text on vertical axis (in degrees, positive or negative)
axis_text_callback NULL Name of callback function for formatting axis text. The function will be called with one argument: callback($value). The function should return a text string to display on the axis.
axis_text_callback_x NULL Name of callback function for formatting X-axis text. The function will be called with one argument: callback($value). The function should return a text string to display on the axis.
axis_text_callback_y NULL Name of callback function for formatting Y-axis text. The function will be called with one argument: callback($value). The function should return a text string to display on the axis.
log_axis_y false Enables logarithmic Y-axis divisions
log_axis_y_base 10 Base of the logarithm (must be > 1)
division_style out Type of axis division lines to draw (options are "out", "in", "over", "infull", "overfull" and "none")
division_style_h NULL Type of division lines to draw on horizontal axis
division_style_v NULL Type of division lines to draw on vertical axis
division_size 3 Length of division lines
division_size_h NULL Length of division lines on horizontal axis
division_size_v NULL Length of division lines on vertical axis
division_colour NULL Colour of division lines, or NULL to use axis colour
division_colour_h NULL Colour of division lines on horizontal axis
division_colour_v NULL Colour of division lines on vertical axis
subdivision_style out Type of subdivision lines to draw (options are "out", "in", "over", "infull", "overfull" and "none")
subdivision_style_h NULL Type of subdivision lines to draw on horizontal axis
subdivision_style_v NULL Type of subdivision lines to draw on vertical axis
subdivision_size 2 Size of axis subdivision markings
subdivision_size_h NULL Size of axis subdivision markings on horizontal axis
subdivision_size_v NULL Size of axis subdivision markings on vertical axis
subdivision_colour division_colour Colour of axis subdivision markings
subdivision_colour_h NULL Colour of axis subdivision markings on horizontal axis
subdivision_colour_v NULL Colour of axis subdivision markings on vertical 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
units_x NULL Units shown after value on X-axis
units_before_x NULL Units shown before value on X-axis
units_y NULL Units shown after value on Y-axis
units_before_y NULL Units shown before value on Y-axis
guideline[5] NULL One or more guide/target lines - see the guide or target lines page for details of how this works
guideline_above[5] false Whether guide lines should be above or below graph (default is below)
guideline_colour[5] rgb(0,0,0) Colour of guide lines
guideline_opacity[5] 1 Opacity of guide line
guideline_length[5] NULL Length of guide line in pixels (+ve from left or bottom, -ve from right or top)
guideline_length_units[5] NULL Length of guide line in graph units (+ve from left or bottom, -ve from right or top)
guideline_stroke_width[5] 1 Width of guide lines
guideline_dash[5] 4,3 Guide line dash pattern
guideline_font[5] sans-serif Font for guide line titles
guideline_font_size[5] 10 Guide line title font size
guideline_font_adjust[5] 0.6 Guide line title font width adjustment ratio
guideline_font_weight[5] normal Guide line title font weight
guideline_text_position[5] inside top right Position of title relative to guide line. Supports "inside", "outside", "top", "bottom", "left", "right", and X and Y offsets.
guideline_text_align[5] NULL Alignment of guide title text ("left", "right" or "centre")
guideline_text_padding[5] 5 Space between guide line and title
guideline_text_colour[5] NULL Colour of guide line title. Defaults to guideline_colour
guideline_text_opacity[5] guideline_opacity Opacity of guideline title
guideline_text_angle[5] 0 Angle of guideline title text (in degrees, positive or negative)
crosshairs[6] false Show cross-hairs that follow mouse cursor
crosshairs_show_h[6] true Show horizontal cross-hair
crosshairs_show_v[6] true Show vertical cross-hair
crosshairs_stroke_width[6] 1 Thickness of cross-hairs
crosshairs_stroke_width_h[6] NULL Thickness of horizontal cross-hair
crosshairs_stroke_width_v[6] NULL Thickness of vertical cross-hair
crosshairs_dash[6] NULL Dash pattern for cross-hairs
crosshairs_dash_h[6] NULL Dash pattern for horizontal cross-hair
crosshairs_dash_v[6] NULL Dash pattern for vertical cross-hair
crosshairs_colour[6] black Colour of cross-hairs
crosshairs_colour_h[6] NULL Colour of horizontal cross-hair
crosshairs_colour_v[6] NULL Colour of vertical cross-hair
crosshairs_opacity[6] 1 Opacity of cross-hairs
crosshairs_opacity_h[6] NULL Opacity of horizontal cross-hair
crosshairs_opacity_v[6] NULL Opacity of vertical cross-hair
crosshairs_show_text[6] true Show coordiates with cross-hairs
crosshairs_text_precision_h[6] NULL Number of decimal places for horizontal coordinate
crosshairs_text_precision_v[6] NULL Number of decimal places for vertical coordinate
crosshairs_text_colour[6] black Colour of coordinates text
crosshairs_text_stroke_width[6] NULL Thickness of box around coordinates (default none)
crosshairs_text_back_colour[6] #fc0 Colour of coordinates box background
crosshairs_text_font[6] Courier Font for coordinates
crosshairs_text_font_size[6] 10 Font size for coordinates
crosshairs_text_font_weight[6] normal Font weight for coordinates
crosshairs_text_padding[6] 1 Distance between coordinates text and edge of box
crosshairs_text_space[6] 3 Distance between coordinates box and cross-hairs
crosshairs_text_round[6] 0 Border radius for coordinates box
datetime_week_start monday Day of the week for starting date/time axis weeks and fortnights
datetime_text_format NULL The date() format string to use for date/time axis text. This can be an associative array of formats to use depending on the division units, for example array("day" => "j M Y", "month" => "F Y").
Grid-based graph options

These options are used by the horizontal bar graphs (the vertical bar graphs support these options too). Note: bar_label_* options have been superseded by data_label_* options in version 2.18. See the data labels page for details.

Horizontal bar graph options - Hide table

OptionDefaultDescription
bar_space[7] 10 Space between bars
bar_width NULL Thickness of bar in pixels. Overrides size calculated using bar_space
bar_width_min 1 Minimum thickness of bar in pixels.
show_bar_labels [Deprecated] false Displays bar value in or above bar
bar_label_position [Deprecated] top Where to display the bar label ("top", "bottom", "centre" or "above")
bar_label_font [Deprecated] sans-serif Font for bar labels
bar_label_font_size [Deprecated] 10 Size of bar label font
bar_label_font_weight [Deprecated] normal Weight of bar label font
bar_label_colour [Deprecated] rgb(0,0,0) Colour of bar label text
bar_label_space [Deprecated] 3 Space between label and top or bottom of bar
bar_label_colour_above [Deprecated] NULL Alternative colour to use when the bar label is outside the bar
group_space[8] 3 Space between bars of group
show_bar_totals[9] false Displays the total value for the bar in a label above the bar
bar_total_font[9] sans-serif Font for bar total labels
bar_total_font_size[9] 10 Size of bar total label font
bar_total_font_weight[9] normal Weight of bar total label font
bar_total_colour[9] rgb(0,0,0) Colour of bar total label text
bar_total_space[9] 3 Space between total label and top or bottom of bar
bar_total_type[10] NULL Label type for bar totals
bar_total_font_adjust[10] NULL Font adjustment for bar totals
bar_total_back_colour[10] NULL Background colour for bar totals
bar_total_angle[10] NULL Text angle for bar totals
bar_total_padding[10] NULL Padding inside bar totals
bar_total_padding_x[10] NULL Horizontal padding inside bar totals
bar_total_padding_y[10] NULL Vertical padding inside bar totals
bar_total_round[10] NULL Rounded corners for bar total boxes or bubbles
bar_total_outline_colour[10] NULL Colour of bar total outline
bar_total_outline_thickness[10] NULL Thickness of bar total outline
bar_total_fill[10] NULL Colour, gradient or pattern to fill in bar total box or bubble
bar_total_tail_width[10] NULL Thickness of tail for bar total bubbles or lines
bar_total_tail_length[10] NULL Length of tail for bar total bubbles or lines
bar_total_shadow_opacity[10] NULL Opacity of bar total shadows
bar_total_callback[9] NULL Name of callback function for formatting bar totals. The function will be called with two arguments: callback($key, $total). The function should return a text string to display in the label.
Horizontal bar graph options

« Back to top of page Line and scatter graphs »