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