SVGGraph 3D Bar Graphs

« Return to SVGGraph page

Skip to:

• Shading with overlays
• Cylinder graph gradient overlay
• Skewing the bar tops and sides
• General options
• Grid-based graph options
• Bar 3D graph options

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.

There are also three horizontal 3D bar graphs:

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.

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:

<?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',
  '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 Goat1000\SVGGraph\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.

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:

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.

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

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

• ^[1]For GroupedBar3DGraph, bar_space is the space between groups of bars.
• ^[2]Only used for GroupedBar3DGraph.
• ^[3]Not used for cylinder graphs
• ^[4]Only used for cylinder graphs.
• ^[5]Only used for StackedGroupedBar3DGraph and StackedGroupedCylinderGraph.

« Back to top of page Horizontal bar graphs »

Copyright © 2022, Goat 1000