LiquidGauge

Liquid fill gauge with number indicator

Example Gauge

Configuration Options

minValue

Type: number
Default: 0
Description: The gauge minimum value.

maxValue

Type: number
Default: 200
Description: The gauge maximum value.

circleThickness

Type: number
Default: 0.05
Description: The outer circle thickness as a percentage of it's radius.

circleFillGap

Type: number
Default: 0.05
Description: The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.

circleColor

Type: string
Default: #178BCA
Description: The color of the outer circle.

waveHeight

Type: number
Default: 0.05
Description: The wave height as a percentage of the radius of the wave circle.

waveCount

Type: number
Default: 1
Description: The number of full waves per width of the wave circle.

circleThickness

Type: number
Default: 0.05
Description: The outer circle thickness as a percentage of it's radius.

waveRiseTime

Type: number
Default: 1000
Description: The amount of time in milliseconds for the wave to rise from 0 to it's final height.

waveAnimateTime

Type: number
Default: 18000
Description: The amount of time in milliseconds for a full wave to enter the wave circle.

waveRise

Type: boolean
Default: true
Description: Control if the wave should rise from 0 to it's full height, or start at it's full height.

waveHeightScaling

Type: boolean
Default: true
Description: Controls wave size scaling at low and high fill percentages. When true, wave height reaches it's maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it's minimum or maximum fill.

waveAnimate

Type: boolean
Default: true
Description: Controls if the wave scrolls or is static.

waveColor

Type: string
Default: #178BCA
Description: The color of the fill wave.

waveOffset

Type: number
Default: 0
Description: The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.

textVertPosition

Type: number
Default: 0.5
Description: The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.

textSize

Type: number
Default: 1
Description: The relative height of the text to display in the wave circle. 1 = 50%

valueCountUp

Type: boolean
Default: true
Description: If true, the displayed value counts up from 0 to it's final value upon loading. If false, the final value is displayed.

textColor

Type: string
Default: #045681
Description: The color of the value text when the wave does not overlap it.

waveTextColor

Type: string
Default: #A4DBf8
Description: The color of the value text when the wave overlaps it.

Example code

// Setup some data
var data = 500;

// Setup some settings
var height = 200;
var width = 200;

// Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    id: 'gauge',
    height: height + 'px',
    width: width + 'px',
  })
  .chart('LiquidFillGauge')
  .c({
    width: width,
    height: height,
    elementId: '#gauge',
  })
  .draw(data);