SVGGraph Pie Graphs

« Return to SVGGraph page

Skip to:

SVGGraph currently has these classes for drawing pie graphs: PieGraph, Pie3DGraph, ExplodedPieGraph, ExplodedPie3DGraph.


It has these donut graph classes: DonutGraph, SemiDonutGraph, Donut3DGraph, SemiDonut3DGraph, ExplodedDonutGraph, ExplodedSemiDonutGraph, ExplodedDonut3DGraph, ExplodedSemiDonut3DGraph.

Dough$30Ray$50Me$40So$25Far$45Lard$35Half off!
Dough$30Ray$50Me$40So$25Far$45Lard$35Not verydonut-like

It also has these polar area graph classes: PolarAreaGraph, PolarArea3DGraph.


Example code

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

require_once 'SVGGraph/autoloader.php';

$settings = array(
  'back_colour' => '#eee',
  'stroke_colour' => '#000',
  'back_stroke_width' => 0,
  'back_stroke_colour' => '#eee',
  'pad_right' => 20,
  'pad_left' => 20,
  'link_base' => '/',
  'link_target' => '_top',
  'show_labels' => true,
  'show_label_amount' => true,
  'label_font' => 'Arial',
  'label_font_size' => '11',
  'label_colour' => '#000',
  'units_before_label' => '$',
  'sort' => false,

$values = array(
  'Dough' => 30, 'Ray' => 50, 'Me' => 40,
  'So' => 25, 'Far' => 45, 'Lard' => 35

$colours = array('#ccf', '#699', '#93c', '#996', '#f39', '#0f3', '#339');
$links = array(
  'Dough' => 'jpegsaver.php', 'Ray' => 'crcdropper.php',
  'Me' => 'svggraph.php'
$graph = new Goat1000\SVGGraph\SVGGraph(300, 200, $settings);


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 'PieGraph' in the final call to $graph->render to 'Pie3DGraph' or one of the other graph types.

Label fading

The options to fade labels in and out when the mouse enters and leaves a pie slice have been in SVGGraph for a long time, but in version 2.5 the new event handler method makes them work a lot better. In the older version only the pie slice had the event handler, meaning that the fading would not work when the mouse was over the label. Using the new event handler, a transparent copy of the pie slice is placed on top, and this has the event handler applied to it instead.

Label fading
data_label_fade_in_speed = 30
data_label_fade_out_speed = 15

In the example above, the data_label_fade_in_speed option is set to 30, and the data_label_fade_out_speed is set to 15. These numbers are the percentage change in opacity of the label with each time slice.

The maximum value of 100 means the label will change from 100% to 0% opacity or from 0% to 100% opacity as soon as the timer function is called - which is set to every 50ms (20 frames per second).

From version 2.18, all types of graph support fading labels using the data_label_fade_in_speed and data_label_fade_out_speed options, though the old options label_fade_in_speed and label_fade_out_speed are still supported by the pie graphs.

Exploded pie and donut graphs

The exploded graphs support four different methods for choosing which slices are exploded, set using the explode option:

Explodes the slices so that the smallest slice moves the farthest from the centre and the largest slice does not move. This is the default.
Explodes the largest slice the farthest distance, not moving the smallest slice.
Explodes all the slices by the explode_amount distance.
None of the slices are exploded at all.

The “none” option might sound useless, but the distance of each slice can also be controlled using structured data, as demonstrated by the example below.

Structured pie graph explosion

The “Milk” and “Coffee” slices are exploded as a result of the structured data fields, leaving the “Water” and “Tea” slices unchanged. The code to generate the pie graph above is shown here:

require_once 'SVGGraph/autoloader.php';

$settings = array(
  'structure' => array(
    'key' => 0,
    'value' => 1,
    'explode' => 2,
  'explode' => 'none',
  'explode_amount' => 30,
  'label_font_size' => 10,
  'label_back_colour' => '#333',
  'sort' => false

$values = array(
  array('Tea', 10),
  array('Coffee', 20, 1.0),
  array('Milk', 25, 0.5),
  array('Water', 50),

$colours = array('#e97','#630','#edd',
  array('#6bf','pattern' => 'polkadot2'));

$graph = new Goat1000\SVGGraph\SVGGraph(300, 200, $settings);

The explode option is set to “none” and the explode_amount is set to 30 pixels. The structure option contains an explode field, specifying that the data for how far to explode each slice should come from index 2 in each value array.

The values array contains the four entries, with the explode values set only for the “Coffee” and “Milk” values. The explode data item is a multiplier, so a value of 1 will explode by the full distance of 30 pixels and the 0.5 used for the “Milk” value will explode it by 15 pixels.

Values where the explode field is not set are given the explode distance that would normally be set by the main explode option.

The start_angle and end_angle options

These two options provide more control over the appearance and shape of the pie graphs. The start_angle option by itself specifies where SVGGraph starts drawing the pie graph, but adding the end_angle option makes SVGGraph draw a partial pie graph instead.

Partial 3D pie graph #1
start_angle = 120
end_angle = 60

For this example start_angle is set to 120 and end_angle is set to 60. The first slice in the pie is “Tea”, starting 120° clockwise from 0° (which is at 3 o'clock). The “Water” slice comes last, ending at 60°.

Partial 3D pie graph #2
start_angle = 60
end_angle = 120

This example swaps the values of start_angle and end_angle to be 60 and 120. The slice_fit option is using the default value true, so the partial pie is scaled to fit in the SVG document.

The start_angle option is supported by all the pie graph types, but end_angle is not supported by the polar area graph types. The semi-donut types all use hard-coded start and end values to halve the donut shape.


These options are common to all graph types:

General options + Show table

The following table lists the other options relevant to the pie graph types: Note: label_* options have been superseded by data_label_* options in version 2.18. See the data labels page for details.

Pie graph options - Hide table

aspect_ratio 1.0 Ratio of height/width (or auto to fill area)
sort true Sorts the pie slices, largest first
reverse false Slices are drawn anti-clockwise instead of clockwise
keep_colour_order false Slices are coloured in their original order instead of sorted order
start_angle 0 Angle in degrees to start the first slice at
end_angle "none" Angle to end drawing at, or none to draw whole 360°
slice_fit true When end_angle is used, makes the partial pie graph shape fit the graph area
show_labels[1] [Deprecated] true Slice labelling on/off option
show_label_key true Display slice index or name
show_label_amount false Display slice value
show_label_percent false Display slice percentage
label_colour [Deprecated] "black" Colour of label text — Default changed from white to black in version 2.18
label_back_colour [Deprecated] NULL Label background colour
label_font [Deprecated] "Arial" Font for labels
label_font_weight [Deprecated] "bold" Label font weight
label_font_size [Deprecated] 18 Label font size
label_fade_in_speed [Deprecated] 0 Speed to fade in labels (1-100, 0 disables)
label_fade_out_speed [Deprecated] 0 Speed to fade out labels, if fading in is enabled
label_position 0.75 Distance of label from centre
label_percent_decimals 2 Number of decimal places in percentage
depth[2] 10 Depth of the pie slice
depth_shade_gradient[2] array("black:0.9", "black:0", "black:0.9", "h") The gradient to place on top of the pie sides, or null for none
inner_radius[3] 0.5 Multiplier for radius of inner ring of donut/semi-donut graph, in range 0.01 to 0.99
inner_text[3] NULL Text for inside donut/semi-donut graph
inner_text_font[3] NULL Font for inner text
inner_text_font_size[3] NULL Font size for inner text
inner_text_font_adjust[3] NULL Font width adjustment for inner text
inner_text_font_weight[3] NULL Font weight for inner text
inner_text_colour[3] NULL Text colour for inner text
inner_text_back_colour[3] NULL Text background colour for inner text
flipped[4] false Flips the semi-donut graph vertically
explode[5] "small" Explosion method for exploded pie graph. The available options are:

small - Smallest slice will be exploded farthest;

large - Largest slice will be exploded farthest;

all - All slices are exploded;

none - No slices are exploded

explode_amount[5] 20 Maximum explosion distance in pixels
donut_slice_gap 0 Gap between donut graph slices, in degrees
Pie graph options

« Back to top of page Gantt charts »

This site uses cookies - details here.