@domoinc/actual-to-budget-gauge

ActualToBudgetGauge

Configuration Options

chartName

Type: string
Default: "ActualToBudgetGauge"

Name of chart for reporting

fillBarColorBad

Type: color
Default: "#E4584F"

Fill color that indicates something is bad

fillBarColorGood

Type: color
Default: "#91D0BC"

Fill color that indicates something is good

fillBarColorNeutral

Type: color
Default: "#E5E5E5"

Fill color that indicates something is neutral

fontFamily

Type: string
Default: "Open Sans"

Font type for the text

format

Type: select
Default: {"name":"Number","value":"number"}

Set the value to show as a number, currency, or percentage value

height

Type: number
Default: 30
Units: px

Height of the widget

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.

labelText

Type: string
Default: "EXPECTED"

Text for the indicator label

lineColor

Type: color
Default: "#555555"

Line color of the target indicator

notFillBarColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is empty

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showExpectedIndicator

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

Show or hide the target indicator

textFontColor

Type: color
Default: "#888888"

Font color for the text

textFontSize

Type: number
Default: 12
Units: px

Font size for the text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

Width of the widget

Data Definition

Actual

Type: number

Default validate:

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

Default accessor:

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

Expected

Type: number

Default validate:

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

Default accessor:

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

Goal

Type: number

Default validate:

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

Default accessor:

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

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  //actual, expected, goal
  [12500, 17900, 30300]
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .attr('transform', 'translate(125,238)')
  .chart('ActualToBudgetGauge')
  .c({
    width: 250,
    height: 30,
    // format: {name: 'Percent', value: 'percent'},
  });

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