HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Meter
A component for displaying the progress of an activity.
Examples

HTML

<div id="example" class="meter-example"></div>

JavaScript

var meter = new hx.Meter('#example')

meter.value({
  unitText: 'Completed',
  total: 1000,
  completed: 642,
  tracker: 570,
  marker: 870,
  markerText: 'Marker: ' + 870
})

CSS

.meter-example {
  width: 100%;
  height: 100%;
  min-height: 100px;
}
Api
Change Log
Prototypes
hx.Meterdeprecated
Deprecated
hx.Meter has been deprecated and will be removed in the next major release
Constructors
hx.MeterselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
A unique css selector or a HTMLElement that identifies the container for the meter.
options
Properties
arcPaddingNumber
The padding between the tracker and the main progress arcs (value between 0 and 1)
markerColString
The color of the marker as a css string
markerInnerExtendNumber
The amount to extend the radius of the marker towards the centre of the semicircle (value between 0 and 1)
markerOuterExtendNumber
The amount to extend the radius of the marker towards the outside of the semicircle (value between 0 and 1)
markerPaddingNumber
The padding that using the marker introduces to the outside of the meter (value between 0 and 1)
markerSizeNumber
The size of the marker in radians
progressBackgroundColString
The background color of the progress arc as a css string
progressColString
The color of the progress arc as a css string
progressWidthNumber
The width of the main progress arc (value between 0 and 1)
redrawOnResizeBoolean
Whether to redraw the meter when the container is resized
Default: true
trackerBackgroundColString
The background color of the tracker arc as a css string
trackerColString
The color of the tracker arc as a css string
trackerWidthNumber
The width of the tracker arc (value between 0 and 1)
useMarkerBoolean
Wheter or not to use the marker part of the meter
Default: false
useTrackerBoolean
Wheter or not to use the tracker part of the meter
Default: false
valueFormattervalueNumberisTotalBooleanString
Formats the given value according to whether it is the total or the completed. By default it adds an "of" in front of the total value.
Arguments
valueNumber
The value as passed in to the meter
isTotalBoolean
Whether the value is the total or the completed
Returns
String
The text to display
Events
render
Emitted when the meter is rendered.
Properties
causeString
'api' if triggered by an api call, or 'user' when triggered by a resize event
data
The current value of the meter
Methods
renderMeter
Re-renders the meter. If the options are changed, you will want to use this method to update the meter with the changes. This does not need to be called after calling value({...}). Meters also automatically re-render when their container is resized.
Returns
Meter
This meter
valuedataObjectMeter
Updates the various values in the meter. All the values are optional. 
meter.value({
  unitText: 'Completed',
  total: 1000,
  completed: 246,
  tracker: 570,
  marker: 120,
  markerText: 'Marker: ' + 120
})
Arguments
data
Properties
completedNumber
The value of the main progress arc
markerNumber
The value of the marker (if used)
markerTextString
The annotation for the marker (if used). Space is limited for the marker text, so keep it as short as possible.
totalNumber
The total capacity of a meter
trackerNumber
The progress of the tracker progress arc (if used)
unitTextString
The text shown at the bottom of the meter, indicating the unit of measurement (eg KG, Seconds, Delivered, etc)
Returns
Meter
Returns this meter if data is provided, or the current data set if no data object is supplied.
valueObject
Gets the current value object for the meter.
Returns
Object
The current values.
Properties
completedNumber
The value of the main progress arc
markerNumber
The value of the marker (if used)
markerTextString
The annotation for the marker (if used). Space is limited for the marker text, so keep it as short as possible.
totalNumber
The total capacity of a meter
trackerNumber
The progress of the tracker progress arc (if used)
unitTextString
The text shown at the bottom of the meter, indicating the unit of measurement (eg KG, Seconds, Delivered, etc)
Functions
hx.meteroptionsObjectSelection
Creates a new Meter set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing Meter
Returns
Selection
A selection containing an element with an Meter initialised on it