Charts and graphs - Customizing pie charts

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Donut preset wb-charts-donut

View code 
// FYI - The "Donut" preset is already defined by default, this are just to show an example on you may reproduce it in your own preset.
window[ "wb-charts" ] = {
	flot: {
		donut: {
			series: {
				pie: {
					show: true,
					radius: 1,
					label: {
						show: true,
						radius: 1,
						threshold: 0.08
					},
					tilt: 0.5,
					innerRadius: 0.45,
					startAngle: 1
				}
			},
			grid: {
				hoverable: true
			}
		},
	charts: {
		donut: {
			decimal: 1
		}
	}
};
Donut preset wb-charts-donut
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

Default

Flot settings:

data-flot = '{ }'
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

Segment labelling

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			}
		}
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true } } } }'>
Segment 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

Donut hole

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45
		}
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45 } } }'>
Donut 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

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } } }'>
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

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 5000,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	}
}'
<table class="wb-charts wb-charts-pie wb-charts-nolegend table" data-flot='{"series": { "pie": { "radius": 5000,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } } }'>
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

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }'>
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

Plugin settings:

data-wb-charts = '{
	"decimal": 1
}'

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'
<table class="wb-charts wb-charts-pie wb-charts-decimal-1 table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>
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

Labelling threshold

Plugin settings:

data-wb-charts = '{
	"decimal": 1
}'

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1,
				"threshold": 0.08
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'
<table class="wb-charts wb-charts-pie wb-charts-decimal-1 wb-charts-legendinline table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true, "threshold": 0.08 }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>
Labelling 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

Starting angle

Plugin settings:

data-wb-charts = '{
	"decimal": 1
}'

Flot settings:

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1,
				"threshold": 0.08
			},
			"innerRadius": 0.45,
			"tilt": 0.5,
			"startAngle": 1
		}
	},
	"grid": {
		"hoverable": true
	}
}'
<table class="wb-charts wb-charts-pie wb-charts-decimal-1 wb-charts-legendinline table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true, "threshold": 0.08 }, "innerRadius": 0.45, "tilt": 0.5, "startAngle": 1 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>
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
Date modified: