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);