@domoinc/thermometer v2.0.2
Thermometer
Thermometer Goal Chart
Configuration Options
chartName
Type: string
Default: "Thermometer"
Name of chart for reporting
chartNeutralColor
Type: color
Default: "#FCCF84"
Color if the quota is not met, but the forecast predicts the quota will be met
gaugeStrokeNotFilledColor
Type: color
Default: "#E4E5E5"
Outer stroke color of the thermometer
generalFillBadColor
Type: color
Default: "#E4584F"
Fill color if the quota is not met
generalFillGoodColor
Type: color
Default: "#80C25D"
Fill color if the quota is met
height
Type: number
Default: 80
Units: px
Height of the widget
indicatorLineLengthPastOutline
Type: number
Default: 50
Length of indicator line outside the thermometer
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: "#333"
Font color for the labels
labelFontWeight
Type: select
Default: {"name":"400 - Regular","value":400}
Font weight for all the titles
labelTextSize
Type: number
Default: 12
Font size for the labels
mainNumberFontColor
Type: color
Default: "#FFFFFF"
Font color for the value
numberFontWeight
Type: select
Default: {"name":"400 - Regular","value":400}
Font weight for all the numbers
numberPrefix
Type: string
Default: "$"
Text added before the number values
numberSuffix
Type: string
Default: ""
Text added before the number values
paddingPastBorder
Type: number
Default: 20
Width of the border
paddingToBorder
Type: number
Default: 35
The space between the gauge and outer border
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textFontFamily
Type: string
Default: "Open Sans"
textPadding
Type: number
Default: 0
Units: px
The space between the gauge and labels
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
useForecasted
Type: select
Default: {"name":"Show","value":true}
Show or hide the forecast indicator
valueTextSize
Type: number
Default: 18
Font size for the value
width
Type: number
Default: 400
Units: px
Width of the widget
xScale
Type: scale
Default: "function scale(x) {\n\t return output(x);\n\t }"
X scale for the chart
Data Definition
CurrentValue
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return Number(line[1]); }ForecastedValue
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return Number(line[2]); }Name
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return Number(line[0]); }QuotaValue
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return Number(line[3]); }Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [['Quarterly Sales', 34555, 50000, 55000]];
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
width: 1000,
height: 1000
})
.append('g')
.attr('transform', 'translate(50, 147)')
.chart('Thermometer')
.c({
'width': 400,
'height': 70,
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);