NeedleGauge
A gauge that shows a value within ranges.
Configuration Options
animationDuration
Type: number
Default: 2000
Units: milliseconds
Duration of the needle animation in milliseconds
chartLabelColor
Type: color
Default: "#888888"
Color for the minimum and maximum labels
chartName
Type: string
Default: "NeedleGauge"
Name of chart for reporting
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
gaugeFillPrimaryColor
Type: color
Default: "#73B0D7"
Color for the value text and labels' color
gaugeStrokeWidth
Type: number
Default: 1
Units: px
Stroke width of the arcs
gaugeWidth
Type: number
Default: 63
Units: px
Width of the arcs
generalSeparatorColor
Type: color
Default: "#FFFFFF"
Stroke color of the arcs
height
Type: number
Default: 250
Units: px
label
Type: string
Default: "Sales"
Label for the gauge
labelTextSize
Type: number
Default: 22.5
Units: px
Text size for all labels
needleColor
Type: color
Default: "#333"
Color of the needle
needleWidth
Type: number
Default: 36
Units: px
Width of the needle indicator at the base
outerRadius
Type: number
Default: 225
Units: px
Radius of the outside of the gauge.
ranges
Type: array
Default: [[75,100],[25,50],[0,25],[50,75]]
Range of the minimum and maximum values for the gauge
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textFontFamily
Type: string
Default: "Open Sans"
Font family of all labels and values
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueTextSize
Type: number
Default: 45
Units: px
Text size for 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 line[0] === undefined ? undefined : String(line[0]); }
Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }
Default accessor:
function (line) { return parseFloat(line[1]);
}
Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
['Sales', 77]
];
var aHeight = 500;
var aWidth = 500;
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr('width', aWidth)
.attr('height', aHeight)
.append('g')
.chart('NeedleGauge')
.c('label', 'Sales')
.c('height', aHeight)
.c('width', aWidth)
.c('ranges', [
[125, 150],
[100, 125],
[75, 100],
[50, 75],
[25, 50],
[0, 25]
]);
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);