@domoinc/actual-to-budget-gauge v2.0.0
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);