BarCapacityGauge

Bar gauge with actual and quota value

Configuration Options

alternateValueTextColor

Type: color
Default: "#333333"

Color of the value text when it is in the right bar

chartName

Type: string
Default: "BarCapacityGauge"

Name of chart for reporting

fillBarColor

Type: color
Default: "#73B0D7"

Color of the left bar

fontFamily

Type: string
Default: "Open Sans"

Font family for the label and number values

height

Type: number
Default: 250
Units: px

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.

labelTextColor

Type: color
Default: "#333333"

Color of the label text

labelTextSize

Type: number
Default: 14
Units: px

Text size of the labels

min

Type: number
Default: 0
Units: px

Min of the chart

notFillBarColor

Type: color
Default: "#E5E5E5"

Color of the right bar

quotaTextColor

Type: color
Default: "#333333"

Color of the quota text

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

spaceAmount

Type: number
Default: 10
Units: px

Space between edge of bar and text

updateSizeableConfigs

Type: boolean
Default: true

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

valueTextColor

Type: color
Default: "#333333"

Color of the value text when it is in the left bar

valueTextSize

Type: number
Default: 14
Units: px

Text size of the current value and quota value

valueTextSizePostfix

Type: number
Default: 10
Units: px

Text size of the percentage number

width

Type: number
Default: 250
Units: px

Data Definition

current

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

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

label

Type: string

Default validate:

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

Default accessor:

function (line) { return line[2] === undefined ? undefined : String(line[2]); }

quota

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  [500, 700, 'TEAM BLUE']
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
  	width: '500px',
  	height: '500px'
  })
  .append('g')
  // .attr('transform', 'translate(0,100)')
  .chart('BarCapacityGauge')
  .c({
  	width: 250,
  	height: 60,

    // labelTextColor: 'red',
    // valueTextColor: 'orange',
    // alternateValueTextColor: 'yellow',
    // valueTextSize: 40,
    // labelTextSize: 50,
    // valueTextSizePostfix: 30
  })

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

// var data2 = [
//   [100, 500, 'TEAM RED']
// ];

// setTimeout(function() {
// 	chart
//     .c({
//       width: 400,
//       height: 120
//     })
//     .draw(data2);
// }, 2000)