SVGGraph Bar Graphs

« Return to SVGGraph page

Skip to:

SVGGraph currently contains these classes for drawing plain vertical bar graphs: BarGraph; StackedBarGraph; GroupedBarGraph; StackedGroupedBarGraph.

DoughRayMeSoFarLard01020304050
BarGraph
DoughRayMeSoFarLardTea020406080
StackedBarGraph
DoughRayMeSoFarLardTea01020304050
GroupedBarGraph
DoughRayMeSoFarLardTea020406080
StackedGroupedBarGraph

The BarAndLineGraph class draws a GroupedBarGraph and MultiLineGraph on the same graph, and the StackedBarAndLineGraph draws a StackedBarGraph and MultiLineGraph on the same graph.

DoughRayMeSoFarLardTea01020304050
BarAndLineGraph
DoughRayMeSoFarLardTea010203040506070
StackedBarAndLineGraph

The Histogram class analyses the data values to draw a histogram.

2030405060012
Histogram

Example code

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

<?php
require_once 'SVGGraph/autoloader.php';

$settings = array(
  'back_colour' => '#eee',
  'stroke_colour' => '#000',
  'back_stroke_width' => 0,
  'back_stroke_colour' => '#eee',
  'axis_colour' => '#333',
  'axis_overlap' => 2,
  'axis_font' => 'Arial',
  '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 Goat1000\SVGGraph\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.

StackedGroupedBarGraph

The StackedGroupedBarGraph example adds two extra colours to those used by the BarGraph and GroupedBarGraph examples since it has four datasets to display:

$colours = array(
  array('red','yellow'),
  array('blue','white'), 
  array('green', 'pattern' => 'polkadot', 'size' => 6),
  array('orange','pattern' => 'check', 'size' => 6)
);

The StackedGroupedBarGraph must also be provided with the stack_group option to tell it where to break the stack into groups. The example graph above uses a value of “2” to show the 0th and 1st datasets in the first stack and the 2nd and 3rd datasets in the second stack. You can provide an array of values to display more than two stacks in each group. For this example with four datasets, setting stack_group to array(1, 2, 3) would put each of the datasets in its own stack, looking exactly like a GroupedBarGraph.

BarAndLineGraph and StackedBarAndLineGraph

The BarAndLineGraph and StackedBarAndLineGraph types must be provided with the line_dataset option to specify which of the datasets should be drawn as lines instead of bars. The default is “1” to show the first dataset as bars, the second dataset as a line and any other dataset as bars. To configure the appearance of the graph lines, refer to the options on the Line graphs page.

Note: the dataset_axis option can be used with any datasets for the BarAndLineGraph, but only for line datasets when using StackedBarAndLineGraph. This is to ensure that the stacked bars use the same scale.

Histogram

The Histogram class works quite differently to the bar graph classes, even though it produces something that looks a lot like a bar graph. Instead of using each value in the data to calculate the height of a bar, it counts the occurrences of each value and groups them into ranges. The ranges of values are used for the X-axis, and the number of values in each range are used for the height of the bar.

The increment option allows you to choose the size of each data range on the X-axis. The default of NULL will let SVGGraph pick an increment that will give you a reasonable number of bars. The percentage option switches the Y-axis value from an absolute count to the percentage of all values.

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
axis_colour "rgb(0,0,0)" Colour of axis lines and text.
axis_colour_h NULL Colour of horizontal axis.
axis_colour_v NULL Colour of vertical axis.
axis_fallback_max 1 Sets a fallback value for the axis maximum when the graph contains all zero values.
axis_font "Courier New" Font for axis division labels.
axis_font_adjust 0.6 Font aspect ratio of axis division text.
axis_font_adjust_h NULL Font aspect ratio of horizontal axis division text.
axis_font_adjust_v NULL Font aspect ratio of vertical axis division text.
axis_font_h NULL Font for horizontal axis division labels.
axis_font_size 10 Font size for axis division labels.
axis_font_size_h NULL Font size for horizontal axis division labels.
axis_font_size_v NULL Font size for vertical axis division labels.
axis_font_v NULL Font for vertical axis division labels.
axis_font_weight "normal" Font weight for axis division labels.
axis_font_weight_h null Font weight for horizontal axis division labels.
axis_font_weight_v null Font weight for vertical axis division labels.
axis_label_position 0.5 Sets position of axis label as a fraction of the axis length.
axis_label_position_h null Sets position of horizontal axis label as a fraction of the axis length.
axis_label_position_v null Sets position of vertical axis label as a fraction of the axis length.
axis_levels_h null Sets the number of levels of horizontal axis division labels.
axis_levels_v null Sets the number of levels of vertical axis division labels.
axis_max_h NULL Maximum value for horizontal axis.
axis_max_v NULL Maximum value for vertical axis.
axis_min_h NULL Minimum value for horizontal axis.
axis_min_v NULL Minimum value for vertical axis.
axis_overlap 5 Distance axes extend past grid.
axis_right false Enables axis on right of grid.
axis_space 15 Space between axes on the right of the graph.
axis_stroke_width 2 Width of axis lines.
axis_stroke_width_h NULL Width of horizontal axis line.
axis_stroke_width_v NULL Width of vertical axis line.
axis_text_angle_h 0 Angle of horizontal axis division text.
axis_text_angle_v 0 Angle of vertical axis division text.
axis_text_back_colour null Background colour for axis division labels.
axis_text_back_colour_h null Background colour for horizontal axis division labels.
axis_text_back_colour_v null Background colour for vertical axis division labels.
axis_text_callback NULL Callback function for axis division text labels.
axis_text_callback_x NULL Callback function for X axis division text labels.
axis_text_callback_y NULL Callback function for Y axis division text labels.
axis_text_colour NULL Colour of axis division labels.
axis_text_colour_h NULL Colour of horizontal axis division labels.
axis_text_colour_v NULL Colour of vertical axis division labels.
axis_text_line_spacing null Sets line spacing for axis division labels.
axis_text_line_spacing_h null Sets line spacing for horizontal axis division labels.
axis_text_line_spacing_v null Sets line spacing for vertical axis division labels.
axis_text_location "grid" Position of axis text when graph contains negative numbers.
axis_text_location_h null Position of horizontal axis text when graph contains negative numbers.
axis_text_location_v null Position of vertical axis text when graph contains negative numbers.
axis_text_position "outside" Position of axis division text labels.
axis_text_position_h NULL Position of horizontal axis division text labels.
axis_text_position_v NULL Position of vertical axis division text labels.
axis_text_space 2 Space between axis division text and axis.
axis_text_space_h NULL Space between horizontal axis division text and axis.
axis_text_space_v NULL Space between vertical axis division text and axis.
axis_ticks_x null Specifies positions of axis tick marks for X-axis.
axis_ticks_y null Specifies positions of axis tick marks for Y-axis.
axis_tightness_y 1 Sets the algorithm used to choose Y-axis divisions.
axis_zero_y true Allows graph to pick a non-zero value for bottom of Y-axis.
dataset_axis NULL Enables multiple Y-axes.
datetime_text_format NULL Date format for date/time axis.
datetime_week_start "monday" Week start day for date/time axis.
decimal_digits NULL Number of decimal digits in axis text labels.
decimal_digits_x NULL Number of decimal digits in X axis text labels.
decimal_digits_y NULL Number of decimal digits in Y axis text labels.
division_colour NULL Colour of axis division marks.
division_colour_h NULL Colour of horizontal axis division marks.
division_colour_v NULL Colour of vertical axis division marks.
division_size 3 Length of division marks.
division_size_h NULL Size of horizontal axis division marks.
division_size_v NULL Size of vertical axis division marks.
division_style "out" Style of axis division marks.
division_style_h NULL Style of horizontal axis division marks.
division_style_v NULL Style of vertical axis division marks.
force_block_label_x false Forces block-style labelling for X axis.
grid_back_colour NULL Colour of grid area background.
grid_back_opacity 1 Opacity of grid background fill.
grid_back_stripe false Displays grid background stripes.
grid_back_stripe_colour "rgb(240,240,240)" Colour of grid background stripes.
grid_back_stripe_opacity 1 Opacity of grid background stripes.
grid_bottom NULL Position of bottom of grid.
grid_colour "rgb(220,220,220)" Colour of grid lines.
grid_colour_h NULL Colour of vertical grid lines.
grid_colour_v NULL Colour of horizontal grid lines.
grid_dash NULL Grid lines dash pattern.
grid_dash_h NULL Grid vertical lines dash pattern.
grid_dash_v NULL Grid horizontal lines dash pattern.
grid_division_h NULL Division interval on horizontal axis.
grid_division_v NULL Division interval on vertical axis.
grid_left NULL Position of left side of grid.
grid_right NULL Position of right side of grid.
grid_straight false Enables straight grid lines on radar graph.
grid_stroke_width 1 Sets the thickness of grid lines.
grid_stroke_width_h null Sets the thickness of grid lines drawn from the horizontal axis.
grid_stroke_width_v null Sets the thickness of grid lines drawn from the vertical axis.
grid_subdivision_colour "rgba(220,220,220,0.5)" Colour of grid subdivision lines.
grid_subdivision_colour_h NULL Colour of vertical grid subdivision lines.
grid_subdivision_colour_v NULL Colour of horizontal grid subdivision lines.
grid_subdivision_dash NULL Grid subdivision lines dash pattern.
grid_subdivision_dash_h NULL Grid vertical subdivision lines dash pattern.
grid_subdivision_dash_v NULL Grid horizontal subdivision lines dash pattern.
grid_subdivision_stroke_width null Sets the thickness of grid subdivision lines.
grid_subdivision_stroke_width_h null Sets the thickness of vertical grid subdivision lines.
grid_subdivision_stroke_width_v null Sets the thickness of horizontal grid subdivision lines.
grid_top NULL Position of top of grid.
increment NULL X-axis increment for histograms.
label_colour "rgb(0,0,0)" Colour for axis label text.
label_colour_h NULL Colour for horizontal axis label text.
label_colour_v NULL Colour for vertical axis label text.
label_font "Arial" Font for axis labels.
label_font_h NULL Font for horizontal axis label.
label_font_size 10 Font size for axis labels.
label_font_size_h NULL Font size for horizontal axis label.
label_font_size_v NULL Font size for vertical axis label.
label_font_v NULL Font for vertical axis label.
label_font_weight "normal" Font weight for axis labels.
label_font_weight_h NULL Font weight for horizontal axis label.
label_font_weight_v NULL Font weight for vertical axis label.
label_h "" Text label for horizontal axis.
label_line_spacing null Sets line spacing for axis labels.
label_line_spacing_h null Sets line spacing for label on horizontal axis.
label_line_spacing_v null Sets line spacing for label on vertical axis.
label_space 6 Spacing around axis labels.
label_v "" Text label for vertical axis.
label_x "" Text label for X axis.
label_y "" Text label for Y axis.
limit_text_angle true Limits the angle of axis text to between -90° and +90°.
log_axis_y false Enables logarithmic Y-axis divisions.
log_axis_y_base 10 Base of the logarithmic axis scale.
minimum_grid_spacing 15 Minimum distance between grid/axis divisions.
minimum_grid_spacing_h NULL Minimum distance between horizontal axis divisions.
minimum_grid_spacing_v NULL Minimum distance between vertical axis divisions.
minimum_subdivision 5 Minimum distance between subdivisions.
minimum_units_y 0 Minimum units to display on Y axis.
show_axes true Enables axis display.
show_axis_h true Enables horizontal axis line.
show_axis_text_h true Enables labelling of horizontal axis divisions.
show_axis_text_v true Enables labelling of vertical axis divisions.
show_axis_v true Enables vertical axis line.
show_divisions true Enables axis division marks.
show_grid true Disables displaying grid.
show_grid_h true Disables displaying horizontal grid lines.
show_grid_subdivisions false Enables displaying grid subdivisions.
show_grid_v true Disables displaying vertical grid lines.
show_subdivisions false Enables axis subdivision marks.
show_x_axis true Enables X-axis on radar graphs.
subdivision_colour NULL Colour of axis subdivision marks.
subdivision_colour_h NULL Colour of horizontal axis subdivision marks.
subdivision_colour_v NULL Colour of vertical axis subdivision marks.
subdivision_h NULL Horizontal axis subdivision interval.
subdivision_size 2 Length of axis subdivision marks.
subdivision_size_h NULL Length of horizontal axis subdivision marks.
subdivision_size_v NULL Length of vertical axis subdivision marks.
subdivision_style "out" Style of axis subdivision marks.
subdivision_style_h NULL Style of horizontal axis subdivision marks.
subdivision_style_v NULL Style of vertical axis subdivision marks.
subdivision_v NULL Vertical axis subdivision interval.
units_before_x NULL Units shown before value on X-axis.
units_before_y NULL Units shown before value on Y-axis.
units_x NULL Units shown after value on X-axis.
units_y NULL Units shown after value on Y-axis.
Grid-based graph options

The options in this table are for use with the bar graphs. Note: bar_label_* options have been superseded by data_label_* options in version 2.18. See the data labels page for details.

Bar graph options - Hide table

OptionDefaultDescription
bar_space[1] 10 Space between bars
bar_width NULL Width of bar in pixels. Overrides size calculated using bar_space
bar_round 0 Radius of bar corners, or 0 for no rounding
bar_width_min 1 Minimum width of bar in pixels.
show_bar_labels[2] [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] "Arial" 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[3] 3 Space between bars of group
show_bar_totals[4] false Displays the total value for the bar in a label above the bar
bar_total_font[4] "Arial" Font for bar total labels
bar_total_font_size[4] 10 Size of bar total label font
bar_total_font_weight[4] "normal" Weight of bar total label font
bar_total_colour[4] "rgb(0,0,0)" Colour of bar total label text
bar_total_space[4] 3 Space between total label and top or bottom of bar
bar_total_type[5] NULL Label type for bar totals
bar_total_font_adjust[5] NULL Font adjustment for bar totals
bar_total_back_colour[5] NULL Background colour for bar totals
bar_total_angle[5] NULL Text angle for bar totals
bar_total_padding[5] NULL Padding inside bar totals
bar_total_padding_x[5] NULL Horizontal padding inside bar totals
bar_total_padding_y[5] NULL Vertical padding inside bar totals
bar_total_round[5] NULL Rounded corners for bar total boxes or bubbles
bar_total_outline_colour[5] NULL Colour of bar total outline
bar_total_outline_thickness[5] NULL Thickness of bar total outline
bar_total_fill[5] NULL Colour, gradient or pattern to fill in bar total box or bubble
bar_total_tail_width[5] NULL Thickness of tail for bar total bubbles or lines
bar_total_tail_length[5] NULL Length of tail for bar total bubbles or lines
bar_total_shadow_opacity[5] NULL Opacity of bar total shadows
bar_total_callback[4] 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.
stack_group[6] NULL A dataset number (or array of datasets numbers) at which to split the stack
line_dataset[7] 1 A dataset number (or array of dataset numbers) to display as lines instead of bars
increment[8] NULL The X-axis increment for the histogram class. NULL to pick a spacing based on the data values.
percentage[8] false Switches to percentage-based histogram Y-axis values instead of absolute counts.
Bar graph options

« Back to top of page 3D bar graphs »