SVGGraph Bar Graphs
SVGGraph currently contains these classes for drawing bar graphs: BarGraph; Bar3DGraph; StackedBarGraph; GroupedBarGraph. An example of each type is shown below.
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', '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('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.
Settings
These options are common to all graph types:
| Option | Default | Description |
|---|---|---|
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:
|
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 |
The following table lists the other options relevant to the bar graph types - many of these options are also used by the line and scatter graphs:
| Option | Default | Description |
|---|---|---|
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 |
project_angle[3] |
30 |
Angle between bar side edges and horizontal axis |
grid_enclose_h[4] |
false |
If true, the horizontal grid will enclose all data points |
grid_enclose_v[4] |
true |
If true, the vertical grid will enclose all data points |
axis_min_h[5] |
NULL |
Minimum extent of X-axis |
axis_max_h[5] |
NULL |
Maximum extent of X-axis |
axis_min_v[5] |
NULL |
Minimum extent of Y-axis |
axis_max_v[5] |
NULL |
Maximum extent of Y-axis |
grid_division_h[5] |
NULL |
Grid interval on X-axis |
grid_division_v[5] |
NULL |
Grid interval on Y-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[6] |
|
Horizontal axis label |
label_v[6] |
|
Vertical axis label |
label_x[6] |
|
X-axis label |
label_y[6] |
|
Y-axis label |
label_space[6] |
6 |
Spacing around axis labels |
label_font[6] |
sans-serif |
Font for axis labels |
label_font_size[6] |
10 |
Font size for axis labels |
label_font_weight[6] |
normal |
Font weight for axis labels |
label_colour[6] |
rgb(0,0,0) |
Colour for axis label text |
- [1]For GroupedBarGraph,
bar_spaceis the space between groups of bars - [2]Only used for GroupedBarGraph
- [3]Only used for Bar3dGraph
- [4]The
grid_enclose_*options are deprecated from version 2.2 - SVGGraph will always attempt to fit the graph within the grid - [5]These options override SVGGraph's calculations for axis start, end and division values. See the axis and grid options page for more details.
- [6]The axis labelling options were added in version 2.6. For details, see the titles, labels and legends page.
