Axis Class
The Axis class. Generates axes for a chart.
Item Index
Methods
- _clearLabelCache
- _createLabelCache
- _dataChangeHandler
- _drawAxis
- _getDefaultStyles
- _getLabelBounds
- _getTextRotationProps
- _handleSizeChange
- _positionChangeHandler
- _removeChildren
- _rotate
- _setCanvas
- _setText
- _setTotalTitleSize
- _simulateTransformOrigin
- _updateGraphic
- _updateHandler
- _updatePathElement
- _updateTitle
- destructor
- drawLine
- getFirstPoint
- getLabel
- getLastPoint
- getLength
- getLineEnd
- getMaxLabelBounds
- getMinLabelBounds
- getNextPoint
- getPosition
- renderUI
- syncUI
Methods
_clearLabelCache
()
private
Removes axis labels from the dom and clears the label cache.
_createLabelCache
()
private
Creates a cache of labels that can be re-used when the axis redraws.
_dataChangeHandler
-
e
Handles change to the dataProvider
Parameters:
-
eObjectEvent object
_drawAxis
()
private
Draws an axis.
_getDefaultStyles
()
protected
Gets the default value for the styles attribute. Overrides
base implementation.
Returns:
_getLabelBounds
-
Value
Returns the coordinates (top, right, bottom, left) for the bounding box of a label.
Parameters:
-
ValueStringof the label
Returns:
_getTextRotationProps
-
styles
Generates the properties necessary for rotating and positioning a text field.
Parameters:
-
stylesObjectproperties for the text field
Returns:
_handleSizeChange
-
e
Updates the axis when the size changes.
Parameters:
-
eObjectEvent object.
_positionChangeHandler
-
e
Handles change to the position attribute
Parameters:
-
eObjectEvent object
_removeChildren
()
private
Removes all DOM elements from an HTML element. Used to clear out labels during detruction phase.
_rotate
-
label -
props
Rotates and positions a text field.
Parameters:
-
labelHTMLElementtext field to rotate and position
-
propsObjectproperties to be applied to the text field.
_setCanvas
()
private
Creates a graphic instance to be used for the axis line and ticks.
_setText
-
label -
val
Updates the content of text field. This method writes a value into a text field using
appendChild. If the value is a String, it is converted to a TextNode first.
Parameters:
-
labelHTMLElementlabel to be updated
-
valStringvalue with which to update the label
_setTotalTitleSize
-
styles
Calculates and sets the total size of a title.
Parameters:
-
stylesObjectProperties for the title field.
_simulateTransformOrigin
-
matrix -
rot -
transformOrigin -
w -
h
Simulates a rotation with a specified transformOrigin.
Parameters:
-
matrixMatrixReference to a
Matrixinstance. -
rotNumberThe rotation (in degrees) that will be performed on a matrix.
-
transformOriginArrayAn array represeniting the origin in which to perform the transform. The first index represents the x origin and the second index represents the y origin.
-
wNumberThe width of the object that will be transformed.
-
hNumberThe height of the object that will be transformed.
_updateGraphic
-
position
Updates the the Graphic instance
Parameters:
-
positionStringPosition of axis
_updatePathElement
()
private
Updates path.
_updateTitle
()
private
Updates the content and style properties for a title field.
destructor
()
protected
Destructor implementation Axis class. Removes all labels and the Graphic instance from the widget.
drawLine
-
startPoint -
endPoint -
line
Draws a line segment between 2 points
getFirstPoint
-
pt
Gets the position of the first point on an axis.
Parameters:
-
ptObjectObject containing x and y coordinates.
Returns:
getLabel
-
pt -
styles
Creates or updates an axis label.
Returns:
getLastPoint
()
private
Calculates the placement of last tick on an axis.
Returns:
getLength
()
private
Calcuates the width or height of an axis depending on its direction.
Returns:
getLineEnd
()
private
Gets the end point of an axis.
Returns:
getMaxLabelBounds
()
Returns the coordinates (top, right, bottom, left) for the bounding box of the last label.
Returns:
getMinLabelBounds
()
Returns the coordinates (top, right, bottom, left) for the bounding box of the first label.
Returns:
getNextPoint
-
point -
majorUnitDistance
Gets the position of the next point on an axis.
Parameters:
Returns:
getPosition
-
point
Calculates position on the axis.
Parameters:
-
pointObjectcontains x and y values
renderUI
()
private
syncUI
()
private
Properties
maxLabelSize
Number
protected
Length in pixels of largest text bounding box. Used to calculate the height of the axis.
Attributes
appendLabelFunction
Function
Function used to append an axis value to an axis label. This function has the following signature:
- textField
- The axis label to be appended. (
HTMLElement) - val
- The value to attach to the text field. This method will accept an
HTMLELementor aString. This method does not use (HTMLElement|String)
HTMLElement using the appendChild method. If the given
value is a String, the method will convert the the value to a textNode before appending to the
HTMLElement. This method will not convert an HTMLString to an HTMLElement.
Fires event appendLabelFunctionChange
Fires when the value for the configuration attribute appendLabelFunction is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
appendTitleFunction
Function
Function used to append a title value to the title object. This function has the following signature:
- textField
- The title text field to be appended. (
HTMLElement) - val
- The value to attach to the text field. This method will accept an
HTMLELementor aString. This method does not use (HTMLElement|String)
HTMLElement using the appendChild method. If the given
value is a String, the method will convert the the value to a textNode before appending to the
HTMLElement element. This method will not convert an HTMLString to an HTMLElement.
Fires event appendTitleFunctionChange
Fires when the value for the configuration attribute appendTitleFunction is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
bottomTickOffset
Number
Distance determined by the tick styles used to calculate the distance between the axis line in relation to the bottom of the axis.
Fires event bottomTickOffsetChange
Fires when the value for the configuration attribute bottomTickOffset is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
calculatedHeight
Number
private
Calculated value of an axis' height. By default, the value is used internally for horizontal axes. If the height
attribute is explicitly set, this value will be ignored.
Fires event calculatedHeightChange
Fires when the value for the configuration attribute calculatedHeight is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
calculatedWidth
Number
private
Calculated value of an axis' width. By default, the value is used internally for vertical axes. If the width
attribute is explicitly set, this value will be ignored.
Fires event calculatedWidthChange
Fires when the value for the configuration attribute calculatedWidth is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
edgeOffset
Number
protected
Difference betweend the first/last tick and edge of axis.
Fires event edgeOffsetChange
Fires when the value for the configuration attribute edgeOffset is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
graphic
Graphic
The graphic in which the axis line and ticks will be rendered.
Fires event graphicChange
Fires when the value for the configuration attribute graphic is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
height
Number
When set, defines the height of a horizontal axis instance. By default, horizontal axes automatically size based on their contents. When the height attribute is set, the axis will not calculate its height. When the height attribute is explicitly set, axis labels will postion themselves off of the the inner edge of the axis and the title, if present, will position itself off of the outer edge. If a specified height is less than the sum of the axis' contents, excess content will overflow.
Fires event heightChange
Fires when the value for the configuration attribute height is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
labelFunction
Function
Method used for formatting a label. This attribute allows for the default label formatting method to overridden.
The method use would need to implement the arguments below and return a String or HTMLElement.
- val
- Label to be formatted. (
String) - format
- Template for formatting label. (optional)
Fires event labelFunctionChange
Fires when the value for the configuration attribute labelFunction is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
labelFunctionScope
Object
Object which should have by the labelFunction
Fires event labelFunctionScopeChange
Fires when the value for the configuration attribute labelFunctionScope is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
labels
Array
Collection of labels used to render the axis.
Fires event labelsChange
Fires when the value for the configuration attribute labels is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
leftTickOffset
Number
Distance determined by the tick styles used to calculate the distance between the axis line in relation to the left of the axis.
Fires event leftTickOffsetChange
Fires when the value for the configuration attribute leftTickOffset is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
maxLabelSize
Number
protected
Length in pixels of largest text bounding box. Used to calculate the height of the axis.
Fires event maxLabelSizeChange
Fires when the value for the configuration attribute maxLabelSize is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
node
HTMLElement
Contains the contents of the axis.
Fires event nodeChange
Fires when the value for the configuration attribute node is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
overlapGraph
Boolean
Indicates whether the axis overlaps the graph. If an axis is the inner most axis on a given position and the tick position is inside or cross, the axis will need to overlap the graph.
Fires event overlapGraphChange
Fires when the value for the configuration attribute overlapGraph is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
path
Shape
private
readonly
Fires event pathChange
Fires when the value for the configuration attribute path is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
position
String
Direction of the axis.
Fires event positionChange
Fires when the value for the configuration attribute position is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
rightTickOffset
Number
Distance determined by the tick styles used to calculate the distance between the axis line in relation to the right side of the axis.
Fires event rightTickOffsetChange
Fires when the value for the configuration attribute rightTickOffset is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
styles
Object
Style properties used for drawing an axis. This attribute is inherited from Renderer. Below are the default values:
- majorTicks
- Properties used for drawing ticks.
- display
- Position of the tick. Possible values are
inside,outside,crossandnone. The default value isinside. - length
- The length (in pixels) of the tick. The default value is 4.
- color
- The color of the tick. The default value is
#dad8c9 - weight
- Number indicating the width of the tick. The default value is 1.
- alpha
- Number from 0 to 1 indicating the opacity of the tick. The default value is 1.
- line
- Properties used for drawing the axis line.
- weight
- Number indicating the width of the axis line. The default value is 1.
- color
- The color of the axis line. The default value is
#dad8c9. - alpha
- Number from 0 to 1 indicating the opacity of the tick. The default value is 1.
- majorUnit
- Properties used to calculate the
majorUnitfor the axis.- determinant
- The algorithm used for calculating distance between ticks. The possible options are
countanddistance. If thedeterminantiscount, the axis ticks will spaced so that a specified number of ticks appear on the axis. If thedeterminantisdistance, the axis ticks will spaced out according to the specified distance. The default value iscount. - count
- Number of ticks to appear on the axis when the
determinantiscount. The default value is 11. - distance
- The distance (in pixels) between ticks when the
determinantisdistance. The default value is 75.
- label
- Properties and styles applied to the axis labels.
- color
- The color of the labels. The default value is
#808080. - alpha
- Number between 0 and 1 indicating the opacity of the labels. The default value is 1.
- fontSize
- The font-size of the labels. The default value is 85%
- rotation
- The rotation, in degrees (between -90 and 90) of the labels. The default value is 0.
- margin
- The distance between the label and the axis/tick. Depending on the position of the
Axis, only one of the properties used.- top
- Pixel value used for an axis with a
positionofbottom. The default value is 4. - right
- Pixel value used for an axis with a
positionofleft. The default value is 4. - bottom
- Pixel value used for an axis with a
positionoftop. The default value is 4. - left
- Pixel value used for an axis with a
positionofright. The default value is 4.
Fires event stylesChange
Fires when the value for the configuration attribute styles is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
tickPath
Shape
private
readonly
Fires event tickPathChange
Fires when the value for the configuration attribute tickPath is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
tickPoints
Array
Collection of points used for placement of labels and ticks along the axis.
Fires event tickPointsChange
Fires when the value for the configuration attribute tickPoints is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
title
String
Title for the axis. When specified, the title will display. The position of the title is determined by the axis position.
- top
- Appears above the axis and it labels. The default rotation is 0.
- right
- Appears to the right of the axis and its labels. The default rotation is 90.
- bottom
- Appears below the axis and its labels. The default rotation is 0.
- left
- Appears to the left of the axis and its labels. The default rotation is -90.
Fires event titleChange
Fires when the value for the configuration attribute title is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
topTickOffset
Number
Distance determined by the tick styles used to calculate the distance between the axis line in relation to the top of the axis.
Fires event topTickOffsetChange
Fires when the value for the configuration attribute topTickOffset is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
width
Number
When set, defines the width of a vertical axis instance. By default, vertical axes automatically size based on their contents. When the width attribute is set, the axis will not calculate its width. When the width attribute is explicitly set, axis labels will postion themselves off of the the inner edge of the axis and the title, if present, will position itself off of the outer edge. If a specified width is less than the sum of the axis' contents, excess content will overflow.
Fires event widthChange
Fires when the value for the configuration attribute width is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added: