LiquidFillGauge

Liquid fill gauge with number indicator, and wave that tapers off over time and restarts on hover

Configuration Options

chartName

Type: string
Default: "LiquidFillGauge"

Name of chart for reporting

circleColor

Type: color
Default: "#73B0D7"

fillCirclePadding

Type: number
Default: 6
Units: px

The padding between the fill circle and outer circle

height

Type: number
Default: 250
Units: px

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.

outerCircleThickness

Type: number
Default: 6
Units: px

undefined

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: color
Default: "#73B0D7"

Text color of text when it is not behind the fill

textColorFill

Type: color
Default: "#DAEAF8"

Text color of text when it is behind the wave

textFontFamily

Type: string
Default: "Open Sans"

textFontSize

Type: number
Default: 48
Units: px

updateSizeableConfigs

Type: boolean
Default: true

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

waveAnimateTime

Type: number
Default: 1000

Duration for the wave to move across the clip path once

waveColor

Type: color
Default: "#73B0D7"

waveCount

Type: number
Default: 1

Number of waves present in the fill circle

waveHeight

Type: number
Default: 12

Ratio height of the wave

waveRiseTime

Type: number
Default: 1000

Duration for the wave rising

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

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 = [
  ['Sales', 0.9]
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .chart('LiquidFillGauge')
  .c({
    width: 300,
    height: 300,
  });

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