RangeGauge

A gauge displaying a range, an average and a current value

Configuration Options

caretWidth

Type: number
Default: 8
Units: px

undefined

chartName

Type: string
Default: "RangeGauge"

Name of chart for reporting

currentIndicatorFontSize

Type: number
Default: 14
Units: px

Font size for the value

currentIndicatorPostfix

Type: string
Default: ""

Text added after the value

currentIndicatorPrefix

Type: string
Default: ""

Text added before the value

currentIndicatorTransitionDuration

Type: number
Default: 500

Transition time of the current indicator (in ms)

generalFillBadColor

Type: color
Default: "#E4584F"

The range will start at this color

generalFillGoodColor

Type: color
Default: "#80C25D"

The range will transition to this color from the middle to the end

generalFillNeutralColor

Type: color
Default: "#E5E5E5"

The range will transition to this color from the start to the middle

height

Type: number
Default: 12
Units: px

Height of the bar

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.

markerFontSize

Type: number
Default: 12
Units: px

Font size for the indicator

markerTextPrefix

Type: string
Default: "AVG "

Text added before the indicator

markerTextSuffix

Type: string
Default: ""

Text added after the indicator

minMaxFontSize

Type: number
Default: 12
Units: px

Font size for the range values

minMaxPostfix

Type: string
Default: ""

Text added after the range values

minMaxPrefix

Type: string
Default: ""

Text added before the range values

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showMarkerTextValue

Type: select
Default: {"name":"Show","value":true}

Show or hide the indicator value

textColor

Type: color
Default: "#333"

Text color of all labels and values

textFontFamily

Type: string
Default: "Open Sans"

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 400
Units: px

Width of the bar

Data Definition

Average

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)); }

Default accessor:

function (line) { return Number(line[3]); }

CurrentValue

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)); }

Default accessor:

function (line) { return Number(line[0]); }

RangeMax

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)); }

Default accessor:

function (line) { return Number(line[2]); }

RangeMin

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

//Setup some fake data
var data = [
	['5000', 0, '10000', 7500]
];

var height = 12;
var width = 400;

//Initialze the widget
var chart = d3.select('#vis')
	.append('svg')
	.attr({
		width: 500,
		height: 500
	})
	.append('g')
	.attr('transform', 'translate(50,250)')
	.chart('RangeGauge')
	.c({
		'width': width,
		'height': height,
	});

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data[0]);

// d3.select('svg').insert('rect', ':first-child')
//   .attr('height', 500)
//   .attr('width', 500)
//   .attr('stroke', 'black')
//   .style('fill', 'white')
//   .style('fill-opacity', 0);

// setTimeout(function() {
// 	chart.draw(['2000', 0, 10000, 6000])
// }, 2000);