@domoinc/ca-gauge-with-text

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