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);