- Skip to main content
- Skip to footer

# Pie charts

- Documentation
- Questions or comments?

"Options" means which CSS class name applied to the `table` elements. Each following charts include the options of the preceding respective charts.

This working example is about:

- How a pie chart can become a donnut chart, and
- How you can simplify multiple chart options in one simple options, like:
  - Use this: `<table class="wet-boew-charts wb-charts-donnut">`
  - Instead of this: `<table class="wet-boew-charts wb-charts-pie wb-charts-height-250 wb-charts-percentlegend-true wb-charts-pieinnerradius-45 wb-charts-pietilt-50 wb-charts-piehoverable-true wb-charts-decimal-1 wb-charts-piethreshold-8 wb-charts-legendinline-true wb-charts-piestartangle-100">` and
  - How to create your own personalized preset

## Requirement

WET v3.1 or later

## Defaults

Options Added

- wet-boew-charts: Activate the charts and graph plugin
- wb-charts-pie: Generate a pie charts
- wb-charts-height-250: Force an height of 250 pixels.

Defaults
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Sectors labeling

Options added

- wb-charts-percentlegend-true: Show the percent label on the sector
- wb-chart-nolegend-true: Hide the legend. The legend text will be added over their sector

Sectors labeling
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Donnut hole

Options Added

- wb-charts-pieinnerradius-45: Percentage of the donnut hole size.

Donnut hole
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Tilted pie

Options Added

- wb-charts-pietilt-50: Percentage of tilt.

Tilted pie
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Rectangular pie

Options Added

- wb-charts-pieradius-500000: Size of the drawed pie in pixels. The real pixel value is the number set divided by 100.

Rectangular pie
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Hovering Effect

Options Added

- wb-charts-piehoverable-true: Add a visual effect to the slice when hovered with the mouse.

Options Removed

- wb-charts-pieradius-500000

Hovering Effect
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Decimal precision

Options Added

- wb-charts-decimal-1: Indicate the number of decimal show in the percentage labels

Decimal precision
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Labeling threshold

Options Added

- wb-charts-piethreshold-8: Hides the labels of any pie slice that is smaller than the specified percentage
- wb-charts-legendinline-true: Indicate that the labels will be show inline

Options Removed

- wb-chart-nolegend-true

Labeling threshold
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Start Angle

Options Added

- wb-charts-piestartangle-100: Factor of PI, multiplied by 100, used for the starting angle (in radians). For your reference the default value is 150.

Start Angle
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Donnut preset `wb-charts-donnut`

New from WET 3.1.2 release. The preset functionality could be emulated for prior version, WET 3.1.2, by combining the setting of the previous chart.

Donnut Preset Javascript Source Code

    // FYI - The "Donnut" preset is already defined in the chart, this are just an help to show an example on how to create your own preset.

    // In the global settings.js
    var wet_boew_charts = {
    	preset: {
    		donnut: {
    			// Donnut setting
    			type: 'pie',
    			height: 250,
    			percentlegend: true,
    			pieinnerradius: 45,
    			pietilt: 50,
    			piehoverable: true,
    			decimal: 1,
    			piethreshold: 8,
    			legendinline: true,
    			piestartangle: 100
    		}
    	}
    }

Donnut preset `wb-charts-donnut`
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Know Issue - Trivial - Undesirable inner white circle

What is the bug? An undesirable white circle that appearing in the middle of a pie chart.

What is the bug severity? Trivial bug that are happening in a very specific context. It's only about to be an undesirable visual effect. The information provided from the pie chart, the pie chart functionality, are out of scope of this bug.

When this bug occur? This trivial bug are only valid when, in that specific order (as appearing in the HTML), a donnut pie chart (with a hole in center) co-exist with a standard pie chart (with no hole in center) in the same page. Here, the specific order are not representing the same order comparing to the execution order in the WET context.

When this bug occur? (more specific and technical) It is when the CSS option `pieinnerradius` is used with multiple value on the same page. Also, in addition to this bug, you may notice that, when activated, the hovering effect could be altered. For more information about when this bug will be fix, see the Flot issue #1128: Pie Chart - Undesirable inner white circle.

What is the workaround? It is possible to order the pie chart, in the HTML, in a way to not reproduce this bug, like this working example. Standard pie chart followed by donnut pie chart. Or to use, by web pages, pie chart where the value of the `pieinnerradius` stay the same for each of them.

If you are experiencing another issue or if you have any question, do not hesitate to submit an issue.

Date modified:
  2013-09-13