NestedPie
A pie chart with an inner pie chart, where the outer is showing capacity and the inner is portraying actual
Configuration Options
chartName
Type: string
Default: "NestedPie"
Nested Pie Chart
chartPrimarySeriesColors
Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]
The primary colors used to represent series data
chartSecondarySeriesColors
Type: colorArray
Default: ["#4E8CBA","#D9EBFD","#31689B","#D9EBFD","#D9EBFD","#559E38","#DDF4BA","#387B26","#DDF4BA","#DDF4BA","#E45621","#FDECAD","#A43724","#FDECAD","#FDECAD","#FDECAD"]
The secondary colors used to represent series data
colorScale
Type: function
Default: ""
undefined
generalSeparatorColor
Type: color
Default: "#FFFFFF"
Color for element separators
generalWashoutColor
Type: color
Default: "#E4E5E5"
Color used to indicate elements that are not being highlighted
height
Type: number
Default: 250
Units: px
numberOfCategories
Type: number
Default: 50
Number Of Categories
radius
Type: number
Default: 10
Chart Radius
secondaryColorScale
Type: function
Default: ""
undefined
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textFontFamily
Type: string
Default: "Open Sans"
tooltipBackgroundColor
Type: color
Default: "#555555"
Background color of the tooltip
tooltipTextColor
Type: color
Default: "#FFFFFF"
Color of the tooltip text
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
Data Definition
Category
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined && this.accessor(d) !== null; }
Default accessor:
function (line) { return ((line[0] === undefined || line[0] === null) ? line[0] : String(line[0])); }
Current Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) !== null && this.accessor(d) >= 0;}
Default accessor:
function (line) { return ((line[2] === undefined || line[2] === null) ? line[2] : Number(line[2])); }
Max Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) !== null && this.accessor(d) >= 0; }
Default accessor:
function (line) { return ((line[1] === undefined || line[1] === null) ? line[1] : Number(line[1])); }
Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
['North', 50, 20],
['South', 20, 15],
['East', 100, 60],
['West', 60, 30]
];
var aHeight = 500;
var aWidth = 500;
//Initialze the widget
var chart = d3.select('body')
.append('svg')
.attr({
'width': aWidth + 'px',
'height': aHeight + 'px'
})
.append('g').attr('transform', 'translate(' + 50 + ',' + 50 + ')')
.chart('NestedPie')
.c({
'height': 400,
'width': 400
});
//Render the chart with data
chart.draw(data);