Trend Gauge Object

This is a rectangular configurable gauge object with a chart on its face. The chart line transitions smoothly during value changes, using D3 version 4. Also includes digital value, min/max alarm bands , and setpoint line on the chart.
Place a <g> element in your svg drawing with its id=name and translation request. Note: the translation values reference the center of the gauge.
e.g. <g id="myName" transform="translate(200,200)" />

(Each gauge is shown with a simulated change every two(2) seconds)

Configuring The Gauge:
buildTrendGauge(name, title, units, timeLine, min, max, minErrorBand, maxErrorBand, width, height, ringColor, faceColor, setPoint)
1.) name - id name for the gauge. Included in id
2.) title - shown in gauge
3.) units - units of measurement (y-axis)
4.) timeLine - number of chart time increments (x-axis)
5.) min - minimum value on gauge (y-axis)
5.) max - maximum value on gauge (y-axis)
7.) width - width of the gauge chart
8.) height - height of the gauge chart
9.) ringColor - gauge stroke color
10.) faceColor - gauge fill color
11.) setPoint(optional) - the setpoint line value
12.) maxErrorBand(optional) - orange-to-red band(% of span)
13.) minErrorBand(optional) - orange-to-red band(% of span)

SVG Source:
Javascript: