BarGauge
Bar gauge with label and value
Configuration Options
alternateTextColor
Type: color
Default: "#333333"
Color of the number value when outside of the gauge
barColor
Type: color
Default: "#73B0D7"
Color of the gauge
barStartPos
Type: number
Default: 0
Sets starting pos after labels for left-alinging bars
barTextPadding
Type: number
Default: 5
Units: px
Padding between edge of bar and text
chartName
Type: string
Default: "BarGauge"
Name of chart for reporting
height
Type: number
Default: 30
Height of the gauge
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.
labelBeforeBar
Type: boolean
Default: true
Labels will be at the start of the bar, false means it will be at the end of the bar
labelTextColor
Type: color
Default: "#8A8D8E"
labelTextSize
Type: number
Default: 14
Units: px
Styles for all bar labels showing values
leftToRight
Type: boolean
Default: true
Bar transitions left to right, false means transitions right to left
maxWidth
Type: number
Default: null
Max width of all bar gauges if more than one is called
prefix
Type: string
Default: ""
String to be appended before the value number
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
suffix
Type: string
Default: ""
String to be appended after the value number
textFontFamily
Type: string
Default: "Open Sans"
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueTextColor
Type: color
Default: "#333333"
Color of the number value
valueTextSize
Type: number
Default: 14
Units: px
Text size of the number indicators inside and outside of the gauge
width
Type: number
Default: 100
Width of the gauge
Data Definition
Label
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return line[0] === undefined ? undefined : String(line[0]); }Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }Default accessor:
function (line) { return Number(line[1]); }Events
Dispatch Events
dispatch:mouseover
dispatch:mouseout
External Events
external:mouseover
external:mouseout
Example
//Setup some fake data
var data = [
['PUSHED', 200]
];
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr('height', '500px')
.attr('width', '500px')
.append('g')
.attr('transform', 'translate(0,0)')
.chart('BarGauge')
.c({
width: 400,
height: 50,
barStartPos: 75,
// min: 50,
// labelTextColor: 'red'
});
//Render the chart with data
chart._notifier.showMessage(false);
chart.draw(data);