SVGGraph 3D Bar Graphs

« Return to SVGGraph page

Skip to:

SVGGraph currently contains these classes for drawing orthographic projection 3D bar graphs: Bar3DGraph; StackedBar3DGraph; GroupedBar3DGraph; StackedGroupedBar3DGraph; CylinderGraph; StackedCylinderGraph; GroupedCylinderGraph; StackedGroupedCylinderGraph. An example of each type is shown below.

Bar3DGraph
CylinderGraph
StackedBar3DGraph
StackedCylinderGraph
GroupedBar3DGraph
GroupedCylinderGraph
StackedGroupedBar3DGraph
StackedGroupedCylinderGraph

Zero and null

One advantage of using 3D bar graphs over flat bar graphs is that graph entries with a value of 0 appear as a parallelogram. This means that tooltips and links will work, and it also allows you to see whether values are 0 or null.

BarGraph
Bar3DGraph

In the 2D bar graph above, “Null” and “Zero” are both empty columns, whereas in the 3D bar graph the “Zero” column contains a bar with a height of 0 and the “Null” column is empty.

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

This code is almost identical to the example on the bar graphs page, but with the addition of the project_angle option and using the “Bar3DGraph” class name in the call to $graph->Render().

The StackedGroupedBar3DGraph and StackedGroupedCylinderGraph work in the same way as the StackedGroupedBarGraph, requiring the use of the stack_group option to specify which bars should be stacked.

Shading with overlays

To improve the depth effect, the 3D bar graphs support shading the different parts of the bars using overlays for the side, top and front sections. The overlay is a solid colour with an opacity that allows the bar colour, gradient or pattern underneath to show through.

bar_top_overlay_opacity = 0.7
bar_side_overlay_opacity = 0.7
bar_top_overlay_opacity = 0.7
bar_side_overlay_opacity = 0
bar_front_overlay_opacity = 0.7

For the first example, the default overlay values have been increased to make the effect more pronounced. The top of the bar uses a white overlay by default, the front and side use a black overlay (with an opacity of 0 for the front, which disables the overlay completely).

The second example swaps the opacity value from the side to the front, making it look like the bars are lit from the side. You could also change the overlay colours to tint the bar sections instead of just making them lighter or darker.

Cylinder graph gradient overlay

The cylinder graphs use a partially transparent gradient overlay to darken the sides of the cylinder for a greater depth effect. The default gradient option is shown here:

$settings['depth_shade_gradient'] = array(
  "black:0.6", "black:0", "black:0.9", "h"
);

The final 'h' in the array of colours tells SVGGraph to create a horizontal gradient, otherwise the gradient would be vertical and not help with the depth effect.

Skewing the bar tops and sides

The skew_side and skew_top options control how the top and side sections of each bar are drawn. When the bars are filled with solid colours it makes no difference, but for pattern fills the difference is obvious:

skew_side = false
skew_top = false
skew_side = true
skew_top = true

In the first example above, both skew options are turned off. The top is filled with the main colour and the side is filled with the same pattern as the front of the bar. The second example shows how the patterns and gradients are slanted to match the angle of the side and top sections of the bars.

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

The options in this table are for use with the 3D bar graphs:

Bar 3D graph options - Hide table

OptionDefaultDescription
bar_space[7] 10 Space between bars
bar_width NULL Width of bar in pixels. Overrides size calculated using bar_space
bar_width_min 1 Minimum width of bar in pixels.
group_space[8] 3 Space between bars of group
project_angle 30 Angle between bar side edges and horizontal axis
skew_side[9] true Skews the side of each bar after filling with pattern or gradient
skew_top[9] true Skews the top of each bar after filling with pattern or gradient instead of filling with solid colour
bar_side_overlay_opacity 0.5 Opacity of overlay on bar sides, 0 for no overlay
bar_side_overlay_colour #000 Colour of overlay on bar sides
bar_top_overlay_opacity 0.3 Opacity of overlay on bar tops, 0 for no overlay
bar_top_overlay_colour #fff Colour of overlay on bar tops
bar_front_overlay_opacity 0 Opacity of overlay on bar fronts, 0 for no overlay
bar_front_overlay_colour #000 Colour of overlay on bar fronts
depth_shade_gradient[10] array("black:0.6", "black:0",     "black:0.9", "h") The gradient to place on top of the sides of cylinders, or NULL for none
stack_group[11] NULL A dataset number (or array of datasets numbers) at which to split the stack
Bar 3D graph options

« Back to top of page Horizontal bar graphs »