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