Gauge
A radial filled gauge widget.
Configuration Options
biggerIsBetter
Type: boolean
Default: true
True if it is better for actual value to be larger than your target value
chartName
Type: string
Default: "Gauge"
A gauge for displaying min, max, target, and actual
gaugeFillPrimaryColor
Type: color
Default: "#73B0D7"
Color of the fill for the gauge
gaugeNotFilledColor
Type: color
Default: "#E4E5E5"
Color used to indicate the gauge is not filled
generalFillBadColor
Type: color
Default: "#E4584F"
Color of the goal arrow when the target is not reached
generalFillGoodColor
Type: color
Default: "#80C25D"
Color of the goal arrow when the target is reached
height
Type: number
Default: 250
Units: px
innerRadius
Type: number
Default: 170
Inner radius of the gauge
label
Type: string
Default: "Sales"
Label for the center of the gauge
max
Type: number
Default: 100
Maximum value of the gauge
min
Type: number
Default: 0
Minimum value of the gauge
minMaxSize
Type: number
Default: 20
Units: px
Font size of the min and max range labels
outerRadius
Type: number
Default: 235
Outer radius of the gauge
rangeLabelColor
Type: color
Default: "#888888"
Text color of the gauge labels for the min and max values
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
target
Type: number
Default: 75
Target value of the gauge
targetLabelSize
Type: number
Default: 14
Units: px
Font size of the target label
targetTextColor
Type: color
Default: "#333"
Text color of the target label and target value
targetTextLabel
Type: string
Default: "Target"
Label for the target
targetValueSize
Type: number
Default: 20
Units: px
Font size of the target value
textFontFamily
Type: string
Default: "Open Sans"
Font of all the labels and numbers
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueLabelColor
Type: color
Default: "#73B0D7"
Color of the gauge value text and its corresponding label
valueLabelSize
Type: number
Default: 14
Units: px
Font size of the value label
valueSize
Type: number
Default: 48
Units: px
Font size of the value
width
Type: number
Default: 250
Units: px
Data Definition
label
Type: string
Default validate:
function (d) { return this.accessor(d) !== 'undefined'; }Default accessor:
function (line) { return 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
External Events
Example
var data = [
['label', 80]
];
var aHeight = 400;
var aWidth = 400;
var chart = d3.select("#vis")
.append("svg")
.attr('height', 500)
.attr('width', 500)
.append("g").attr("transform", "translate(" + 50 + "," + 60 + ")")
.chart("Gauge")
.config({
'height': aHeight,
'width' : aWidth,
});
chart._notifier.showMessage(true);
chart.draw(data);
setTimeout(function(){
chart.config({
'max': 200,
"target": 175,
//biggerIsBetter: false,
});
chart.draw([
['label', 67]
]);
}, 3000);
setTimeout(function(){
chart
.c({
height: 400,
width: 400,
})
.draw(data);
}, 6000);