Liquid Tank

Simple widget for displaying data from liquids.

Options

Property	Description	Type	Default
min	Minimum value	Number	0
max	Maximum value	Number	1
segments	List of segments.	Array	[ ]
fillStyle	Style of the tank fill. Either "solid" or "segmented".	String	"solid"
dark	When set to true it adjusts colors for a darker background.	Boolean	false
fontFamily	Font family for the displayed value	String	Arial
fontSize	Font size for the displayed value	Number	20
valueFormatter	Function used to format the displayed value. Must return a string.	Function

Example

var element = document.getElementById("widget");
var liquidTank = new LiquidTank(element, {
    min: 0,
    max: 100,
    fillStyle: 'solid',
    segments: [
        {
            color: "#00FF00",
            startValue: 0,
            endValue: 90
        },
        {
            color: "#FF0000",
            startValue: 90,
            endValue: 100
        }
    ],
    dark: false,
    fontFamily: 'Arial',
    fontSize: 20,
    valueFormatter: function (value) {
        return value + ' L';
    }
});

liquidTank.setValue(80);