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

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.

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

Donnut hole

Options Added

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

Tilted pie

Options Added

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

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.

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

Decimal precision

Options Added

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

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

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.

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.

// 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
		}
	}
}