Tank Level Object

This is a configurable tank level object showing the 0 to maximum span values on the y-axis. The level transitions smoothly during value changes, using D3 version 4. Also includes set point (dashed line) value, plus orange-to-red min/max alarm zones on the levelBar. The levelBar flashes if values fall within the min/max alarm warning zones.


Click button for a simulated change in the tank levels

Configuring The Tank Level:
buildTankLevel(id, title, units,max, levelBarColor, faceColor, minAlert, maxAlert, setPoint, initialValue, scale, transX, transY)

1.) id - your ID for the tank level
2.) title - shown in tank level
3.) units - units of measurement
5.) max - maximum value number range
6.) levelBarColor - border enclosing the numbers
7.) faceColor - the background color
8.) minAlert (optional) - minimum alarm warning value
9.) maxAlert (optional) - maximum alarm warning value
10.) setPoint (optional) - setpoint of the control loop
11.) initialValue - value first shown in the levelBar
12.) scale - size the tank level (default size 300x400 px.)
13.) transX - locate tank level upper-left x
14.) transY - locate tank level upper-left y

SVG Source:
Javascript: