SVGGraph Pie Graphs

« Return to SVGGraph page

Skip to:

SVGGraph currently contains these classes for drawing pie graphs: PieGraph, Pie3DGraph, DonutGraph, PolarAreaGraph, ExplodedPieGraph. An example of each type is shown below.


Example code

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

$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' => 'Georgia', '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 SVGGraph(300, 200, $settings);
$graph->colours = $colours;

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_fade_in_speed = 30
label_fade_out_speed = 15

In the example above, the label_fade_in_speed option is set to 30, and the 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.

Exploded pie graphs

The ExplodedPieGraph type supports 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:

$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 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.


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[3] [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] sans-serif 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[4] 10 Depth of the pie slice
depth_shade_gradient[4] 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[5] 0.5 Multiplier for radius of inner ring of donut/semi-donut graph, in range 0.01 to 0.99
inner_text[5] NULL Text for inside donut/semi-donut graph
inner_text_font[5] NULL Font for inner text
inner_text_font_size[5] NULL Font size for inner text
inner_text_font_adjust[5] NULL Font width adjustment for inner text
inner_text_font_weight[5] NULL Font weight for inner text
inner_text_colour[5] NULL Text colour for inner text
inner_text_back_colour[5] NULL Text background colour for inner text
flipped[6] false Flips the semi-donut graph vertically
explode[7] small Explosion method for exploded pie graph. Options are:
Smallest slice will be exploded farthest;
Largest slice will be exploded farthest;
All slices are exploded;
No slices are exploded
explode_amount[7] 20 Maximum explosion distance in pixels
Pie graph options

« Back to top of page Other graphs »