SVGGraph Pie Graphs

« Return to SVGGraph page

Skip to:

• Label fading
• Exploded graphs
• Start_angle and end_angle options
• General options
• Pie graph options

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.

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:

<?php
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);

$graph->colours($colours);
$graph->values($values);
$graph->links($links);
$graph->render('PieGraph');

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.

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:

small

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.

large

Explodes the largest slice the farthest distance, not moving the smallest slice.

all

Explodes all the slices by the explode_amount distance.

none

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.

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:

<?php
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);
$graph->colours($colours);
$graph->values($values);
$graph->render('ExplodedPieGraph');

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.

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

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.

Settings

These options are common to all graph types:

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.

• ^[1]Pie label options have been replaced by global data_label_* options.
• ^[2]Only used by Pie3DGraph.
• ^[3]Only used by DonutGraph and SemiDonutGraph. inner_text_* options fall back to using label options if NULL.
• ^[4]Only used by SemiDonutGraph
• ^[5]Only used by ExplodedPieGraph.

« Back to top of page Gantt charts »

Copyright © 2022, Goat 1000