@domoinc/ca-gauge-with-text v1.0.4
CAGaugeWithText
Configuration Options
animationDuration
Type: number
Default: 2000
Units: ms
Time it takes for all animations to happen
bottomLabel
Type: string
Default: "METRIC"
Label below the value
chartName
Type: string
Default: "CAGaugeWithText"
Name of chart for Reporting.
fontWeight
Type: select
Default: {"name":"400 - Regular","value":400}
Font weight of the value text and labels. Note: Not all weights are supported by every font family.
gaugeFillColor
Type: color
Default: "#f68c35"
Color for the gauge and arrow indicator
generalNotFilledColor
Type: color
Default: "#E4E5E5"
Color for the gauge when it is not filled
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.
labelColor
Type: color
Default: "#f68c35"
Color for the labels
max
Type: number
Default: 100
Max value of the gauge
min
Type: number
Default: 0
Min value of the gauge
outerCircleColor
Type: color
Default: "#f68c35"
Color of the outer dashed circle
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
strokeWidth
Type: number
Default: 1
Units: px
Width of the stroke for the outer circle
textFontFamily
Type: string
Default: "Open Sans"
Font family of the numbers and labels
topLabel
Type: string
Default: "METRIC"
Label above the value
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueColor
Type: color
Default: "#f68c35"
Color for the value text
width
Type: undefined
Default: undefined
undefined
Data Definition
Label
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }
Default accessor:
function (line) { return line[0] === undefined ? undefined : String(line[0]); }
Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }
Default accessor:
function (line) { return parseFloat(line[1]); }
Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
["Sales", 77.5]
// ["Sales", 777777.5]
];
var aWidth = 200;
var aHeight = 200;
//Initialze the widget
var chart = d3.select("#vis svg")
.append('g')
.attr('transform', 'translate(25,150)')
.chart("CAGaugeWithText")
.c({
width: aWidth,
height: aHeight,
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);