@domoinc/multi-metric-gauge v1.0.1

MultiMetricGauge

Multiple gauges with circles and labels

Configuration Options

bottomLabelTextColor

Type: color
Default: #333333

Color of the bottom label

chartName

Type: string
Default: MultiMetricGauge

Name of chart for Reporting.

circleLabelTextSize

Type: number
Default: 12
Units: px

Text size of the labels next to the circles on each gauge

circleRadius

Type: number
Default: 4
Units: px

Radii of the circles on the arcs

gaugeColorOne

Type: color
Default: #F68C35

Color of the first gauge

gaugeColorThree

Type: color
Default: #888888

Color of the third gauge

gaugeColorTwo

Type: color
Default: #888888

Color of the second gauge

gaugeNotFilledColor

Type: color
Default: #888888

Color of the portion of the gauge that is not filled

height

Type: number
Default: 250
Units: px

labelText

Type: string
Default: METRIC

User input text

labelTextSize

Type: number
Default: 18
Units: px

undefined

outerTickCircleColor

Type: color
Default: #d7d9da

rangeMax

Type: number
Default: 100

Maximum value for the gauge

rangeMin

Type: number
Default: 0

Minimum value for the gauge

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: Open Sans

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

valueTextSize

Type: number
Default: 100
Units: px

Size of the value text

width

Type: number
Default: 250
Units: px

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)) && this.accessor(d) >= 0; }

Default accessor:

function (line) { return Number(line[1]); }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['North', 75],
  ['South', 65],
  ['East', 55],
];

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    height: '1000px',
    width: '1000px'
  })
  .append("g")
  .attr('transform', 'translate(50,50)')
  .chart("MultiMetricGauge")
  .c({
    width: 400,
    height: 400,
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);