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);