Charts and graphs - Customizing pie charts

Donut preset wb-charts-donut

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

Default

Flot settings:

data-flot = '{ }'

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

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

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

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

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

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

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

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