Bar Gauge Object

This is a configurable bar gauge object showing the minimum to maximum span values on the x-axis. The bar transitions smoothly during value changes, using D3 version 4. Also includes set point value plus orange-to-red min/max alarm zones on the bar. The bar flashes if values fall within the min/max alarm warning zones.


Click button for a simulated change in the bar gauge

Configuring The Bar Gauge:
buildBarGauge(id, title, units, min, max, barColor, faceColor, setPoint, maxAlert, minAlert, initialValue, scale, transX, transY)

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

SVG Source:
Javascript: