Pie charts
"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
- Use this:
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.
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
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.
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.
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.
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
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
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
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.
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
}
}
}
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: