PercentCircle
Circle within a circle that compares data metrics.
Configuration Options
chartName
Type: string
Default: "PercentCircle"
Name of chart for reporting
gaugeFillPrimaryColor
Type: color
Default: "#73B0D7"
The primary fill color for each gauge
generalNotFilledColor
Type: color
Default: "#E4E5E5"
Color used to indicate no data
generalSeparatorColor
Type: color
Default: "#FFFFFF"
Font color for the maximum value
height
Type: number
Default: 400
Units: px
Height of the widget
isOnMobile
Type: boolean
Default: false
If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textColor
Type: color
Default: "#333"
Font color for the value
textFontFamily
Type: string
Default: "Open Sans"
textSize
Type: number
Default: 12
Units: px
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 400
Units: px
Width of the widget
Data Definition
Label
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return line[0]; }Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[1]); }Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
['Sales Quota', 100], //Total
['Sales', 70] //Part
];
var aHeight = 400;
var aWidth = 400;
//Initialze the widget
var chart = d3.select("#vis")
.append("svg")
.attr('width', 500 + 'px')
.attr('height', 500 + 'px')
.append("g")
.attr("transform", "translate(59,50)")
.chart("PercentCircle")
.c('width', aWidth)
.c('height', aHeight);
//Render the chart with data
//chart._notifier.showMessage(true);
chart.draw(data);