MultiBarCapacityGauge

Multiple capacity gauges with values and quotas

Configuration Options

barHeight

Type: number
Default: 30
Units: px

Height of the gauges

chartName

Type: string
Default: "template"

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

fontFamily

Type: string
Default: "Open Sans"

Font family for the labels and number values

gaugePadding

Type: number
Default: 0
Units: px

The space between the gauges

height

Type: undefined
Default: undefined

undefined

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"

Font color for the labels

labelTextSize

Type: number
Default: 14
Units: px

Font size for the labels

notFillBarColor

Type: color
Default: "#E5E5E5"

Color of the right bar

quotaTextColor

Type: color
Default: "#333333"

Maximum value for the gauge

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

updateSizeableConfigs

Type: boolean
Default: true

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

valueTextSize

Type: number
Default: 14
Units: px

Font size for the values

valueTextSizePostfix

Type: number
Default: 10
Units: px

Font size for the percentage

width

Type: number
Default: 400
Units: px

Width of the widget

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 && this.accessor(d) !== null; }

Default accessor:

function (line) { return !line[2] ? 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

external:mouseover
external:mouseout

Example

//Setup some fake data
var data = [
  // Current, Quota, Team
  [180, 240, 'North'],
  [170, 220, 'South'],
  [190, 230, 'East'],
  [120, 210, 'West'],
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr('height', 500)
  .attr('width', 500)
  .append('g')
  .attr('transform', 'translate(29,133)')
  .chart('MultiBarCapacityGauge')
  .c({
    width: 400,
    height: 400,
  })

//Render the chart with data
chart.draw(data);

setTimeout(function () {
  chart.trigger('external:mouseover', data[0][2]);
}, 2000);
setTimeout(function () {
  chart.trigger('external:mouseout');
}, 3000);
setTimeout(function () {
  chart.trigger('external:mouseover', data[1][2]);
}, 3000);
setTimeout(function () {
  chart.trigger('external:mouseout');
}, 4000);