BarCapacityGauge
Bar gauge with actual and quota value
Configuration Options
alternateValueTextColor
Type: color
Default: "#333333"
Color of the value text when it is in the right bar
chartName
Type: string
Default: "BarCapacityGauge"
Name of chart for reporting
fillBarColor
Type: color
Default: "#73B0D7"
Color of the left bar
fontFamily
Type: string
Default: "Open Sans"
Font family for the label and number values
height
Type: number
Default: 250
Units: px
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.
labelTextColor
Type: color
Default: "#333333"
Color of the label text
labelTextSize
Type: number
Default: 14
Units: px
Text size of the labels
min
Type: number
Default: 0
Units: px
Min of the chart
notFillBarColor
Type: color
Default: "#E5E5E5"
Color of the right bar
quotaTextColor
Type: color
Default: "#333333"
Color of the quota text
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
spaceAmount
Type: number
Default: 10
Units: px
Space between edge of bar and text
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueTextColor
Type: color
Default: "#333333"
Color of the value text when it is in the left bar
valueTextSize
Type: number
Default: 14
Units: px
Text size of the current value and quota value
valueTextSizePostfix
Type: number
Default: 10
Units: px
Text size of the percentage number
width
Type: number
Default: 250
Units: px
Data Definition
current
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }
Default accessor:
function (line) { return Number(line[0]); }
label
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }
Default accessor:
function (line) { return line[2] === undefined ? undefined : String(line[2]); }
quota
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 = [
[500, 700, 'TEAM BLUE']
];
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
width: '500px',
height: '500px'
})
.append('g')
// .attr('transform', 'translate(0,100)')
.chart('BarCapacityGauge')
.c({
width: 250,
height: 60,
// labelTextColor: 'red',
// valueTextColor: 'orange',
// alternateValueTextColor: 'yellow',
// valueTextSize: 40,
// labelTextSize: 50,
// valueTextSizePostfix: 30
})
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
// var data2 = [
// [100, 500, 'TEAM RED']
// ];
// setTimeout(function() {
// chart
// .c({
// width: 400,
// height: 120
// })
// .draw(data2);
// }, 2000)