Home

# Class goog.ui.Gauge

A UI component that displays a gauge. A gauge displayes a current value within a round axis that represents a given range. The gauge is built from an external border, and internal border inside it, ticks and labels inside the internal border, and a needle that points to the current value.

extends goog.ui.Component

Instance Method Summary
| `addBackgroundColor(number fromValue, number toValue, string color)` Set the background color for a range of values on the gauge.
| `clear_()` Clears the entire graphics area.
| `createDom()` Creates the DOM representation of the graphics area.
| `disposeInternal()` Disposes of the component. Calls {@code exitDocument}, which is expected to remove event handlers and clean up the component. Propagates the call to the component's children, if any. Removes the component's DOM from the document unless it was decorated.
| `drawValue_()` Draw the elements that depend on the current value (the needle and the formatted value). This function is called whenever a value is changed or when the entire gauge is redrawn.
| `draw_()` Redraw the entire gauge.
| `enterDocument()` Called when the component is added to the DOM. Overrides {@link goog.ui.Component#enterDocument}.
| `exitDocument()` Called when the component is removed from the DOM. Overrides {@link goog.ui.Component#exitDocument}.
| `getMaximum() ⇒ number`
| `getMinimum() ⇒ number`
| `onAnimateEnd_()` Handle animation events when hand move is complete.
| `onAnimate_(?goog.fx.AnimationEvent e)` Handle animation events while the hand is moving.
| `redraw()` Redraws the entire gauge. Should be called after theme colors have been changed.
| `setMajorTickLabels(?Array.<string> tickLabels)` Sets the labels of the major ticks.
| `setMaximum(number max)` Sets the maximum number of the range
| `setMinimum(number min)` Sets the minimum value of the range
| `setTheme(?goog.ui.GaugeTheme theme)` Sets the color theme for drawing the gauge.
| `setTicks(number majorUnits, number minorUnits)` Sets the number of major tick sections and minor tick sections.
| `setTitleBottom(string text)` Sets the bottom title of the gauge. The top title is displayed below the center.
| `setTitleFont(?goog.graphics.Font font)` Sets the font for displaying top and bottom titles.
| `setTitleTop(string text)` Sets the top title of the gauge. The top title is displayed above the center.
| `setValue(number value, string= opt_formattedValue)` Sets the current value range displayed by the gauge.
| `setValueFont(?goog.graphics.Font font)` Sets the font for displaying the formatted value.
| `stopAnimation_()` Stop the current animation, if it is active.
| `valuePositionToAngle_(number valuePct) ⇒ number` Convert a value-position (percent in the range) to an angle based on the angle span. A value-position is a value that has been proportinally adjusted to a value betwwen 0-1, proportionaly to the range.
| `valueToAngle_(number value) ⇒ number` Convert a value to an angle based on the value range and angle span

`valueToRangePosition_(number value) ⇒ number`

Convert a value to the position in the range. The returned position is a value between 0 and 1, where 0 indicates the lowest range value, 1 is the highest range, and any value in between is proportional to mapping the range to (0-1). If the value is not within the range, the returned value may be a bit lower than 0, or a bit higher than 1. This is done so that values out of range will be displayed just a bit outside of the gauge axis.