Fork me on GitHub

Axis

new Axis( )

Axis constructor. Usually not instanced directly, but for custom made axes, that's possible
Example
function myAxis() {};
myAxis.prototype = new Graph.getConstructor("axis");
graph.setBottomAxis( new myAxis( { } ) );

Extends

Members

(static) AxisOptionsDefault

Default graph parameters
Properties:
Name Type Description
display Boolean Whether to display or not the axis
flipped Boolean Flips the axis (maximum and minimum will be inverted)
axisDataSpacing.min Numner The spacing of the at the bottom of the axis. The value is multiplied by the (max - min) values given by the series (0.1 means 10% of the serie width / height).
axisDataSpacing.max Number The spacing of the at the top of the axis. The value is multiplied by the (max - min) values given by the series (0.1 means 10% of the serie width / height).
unitModification String Used to change the units of the axis in a defined way. Currently, "time" and "time:min.sec" are supported. They will display the value in days, hours, minutes and seconds and the data should be expressed in seconds.
primaryGrid Boolean Whether or not to display the primary grid (on the main ticks)
secondaryGrid Boolean Whether or not to display the secondary grid (on the secondary ticks)
tickPosition Number Sets the position of the ticks with regards to the axis ( 1 = inside, 2 = centered, 3 = outside ).
nbTicksPrimary Number The number of primary ticks to use (approximately)
nbTicksSecondary Number The number of secondary ticks to use (approximately)
ticklabelratio Number Scaling factor on the labels under each primary ticks
exponentialFactor Number Scales the labels under each primary ticks by 10^(exponentialFactor)
exponentialLabelFactor Number Scales the axis label by 10^(exponentialFactor)
logScale Boolean Display the axis in log scale (base 10)
forcedMin Number | Boolean Use a number to force the minimum value of the axis (becomes independant of its series)
forcedMax Number | Boolean Use a number to force the maximum value of the axis (becomes independant of its series)

getRelPx

getVal

Methods

{Axis} adapt( )

Adapts maximum and minimum of the axis if options.adaptTo is defined
Since:
  • 1.13.2
Returns:
{ Axis } The current axis

{Axis} adaptTo( Axis, Boolean axis , Number thisValue , Number foreignValue , String preference )

Aligns ```thisValue``` of the axis to ```foreignValue``` of another axis
Parameters:
Name Type Description
axis Axis | Boolean The axis with which the 0 should be aligned. Use "false" to deactivate the adapt to 0 mode.
thisValue Number The value of the current axis that should be aligned
foreignValue Number The value of the reference axis that should be aligned
preference String "min" or "max". Defined the boundary that should behave the more normally
Since:
  • 1.13.2
Returns:
{ Axis } The current axis

cacheCurrentMax( )

Caches the current axis maximum

cacheCurrentMin( )

Caches the current axis minimum

cacheInterval( )

Caches the current interval

{Axis} flip( Boolean flip )

Sets the flipping state of the axis. If enabled, the axis is descending rather than ascending.
Parameters:
Name Type Description
flip Boolean The new flipping state of the axis
Returns:
{ Axis } The current axis

{Axis} forceMax( Number max , Boolean noRescale )

Forces the maximum value of the axis (no more dependant on the serie values).
Parameters:
Name Type Default Description
max Number The maximum value of the axis
noRescale Boolean false ```true``` to prevent the axis to rescale to set this maximum. Rescales anyway if current max is higher than the value
Returns:
{ Axis } The current axis

{Axis} forceMin( Number min , Boolean noRescale )

Forces the minimum value of the axis (no more dependant on the serie values)
Parameters:
Name Type Default Description
min Number The minimum value of the axis
noRescale Boolean false ```true``` to prevent the axis to rescale to set this minimum. Rescales anyway if current min is lower than the value. Defaults to ```false```
Returns:
{ Axis } The current axis

{Axis} forceToAxis( Axis axis )

Forces the min and max values of the axis to the min / max values of another axis
Parameters:
Name Type Description
axis Axis The axis from which the min / max values are retrieved.
Returns:
{ Axis } The current axis

{String} getAxisColor( )

Gets the axis color
Since:
  • 1.13.2
Returns:
{ String } The color of the axis

{Number} getCurrentInterval( )

Returns:
{ Number } the maximum interval ( max - min ) of the axis ( not nessarily the current one )

{Number} getCurrentMax( )

Returns:
{ Number } The current maximum value of the axis

{Number} getCurrentMin( )

Returns:
{ Number } The current minimum value of the axis

{Number} getDataMax( )

Retrieves the maximum possible value of the axis based only on the data. Does not take into account the possible axis forcing
Returns:
{ Number } The maximum possible value of the axis

{Number} getDataMin( )

Retrieves the minimum possible value of the axis based only on the data. Does not take into account the possible axis forcing
Returns:
{ Number } The minimum possible value of the axis

{Axis} getFloatingAxis( )

Returns:
{ Axis } The axis referencing the floating value of the current axis

{Axis} getFloatingValue( )

Returns:
{ Axis } The value to which the current axis is aligned to

{Number} getForcedMax( )

Retrieves the forced minimum of the axis
Returns:
{ Number } The maximum possible value of the axis

{Number} getForcedMin( )

Retrieves the forced minimum of the axis
Returns:
{ Number } The maximum possible value of the axis

{Number} getInterval( )

Returns:
{ Number } the maximum interval ( max - min ) of the axis ( not nessarily the current one )

{String} getLabel( )

Returns:
{ String } The label value

{String} getLabelColor( )

Gets the color of the label
Since:
  • 1.13.2
Returns:
{ String } The color of the label

{Number} getMaxPx( )

Returns:
{ Number } The position in px of the top of the axis

{Number} getMaxValue( )

Retrieves the maximum possible value of the axis. Can be set by "forcedMax", "adapt0ToAxis" or by the values of the series the axis contains. Does not take into account any zooming.
Returns:
{ Number } The maximum possible value of the axis

{Number} getMinPx( )

Returns:
{ Number } The position in px of the bottom of the axis

{Number} getMinValue( )

Retrieves the minimum possible value of the axis. Can be set by "forcedMin", "adapt0ToAxis" or by the values of the series the axis contains. Does not take into account any zooming.
Returns:
{ Number } The minimum possible value of the axis

{Number} getPos( Number value )

Transform a value into pixels, according to the axis scaling. The value is referenced to the drawing wrapper, not the the axis minimal value
Parameters:
Name Type Description
value Number The value to translate into pixels
Returns:
{ Number } The value transformed into pixels

{String} getPrimaryGridColor( )

Gets the color of the primary grid
Since:
  • 1.13.3
Returns:
{ String } color - The primary grid color

{String} getPrimaryGridDasharray( )

Gets the dasharray of the primary grid lines
Since:
  • 1.13.3
Returns:
{ String } dasharray - The dasharray of the primary grid lines

{Number} getPrimaryGridOpacity( )

Gets the opacity of the primary grid lines
Since:
  • 1.13.3
Returns:
{ Number } opacity - The opacity of the primary grid lines

{Number} getPrimaryGridWidth( )

Gets the width of the primary grid lines
Since:
  • 1.13.3
Returns:
{ Number } width - The width of the primary grid lines

{String} getPrimaryTicksColor( )

Gets the color of the main ticks
Since:
  • 1.13.2
Returns:
{ String } The color of the primary ticks

{Number} getRelPx( Number value )

Transform a delta value into pixels
Parameters:
Name Type Description
value Number The value to translate into pixels
Returns:
{ Number } The value transformed into pixels
Example
graph.getBottomAxis().forceMin( 20 ).forceMax( 50 ).getRelPx( 2 ); // Returns how many pixels will be covered by 2 units. Let's assume 600px of width, it's ( 2 / 30 ) * 600 = 40px

{Number} getRelVal( Number pixels )

Transform a delta pixels value into value
Parameters:
Name Type Description
pixels Number The pixel to convert into a value
See:
  • Axis~getRelPx
Returns:
{ Number } The delta value corresponding to delta pixels
Example
graph.getBottomAxis().forceMin( 20 ).forceMax( 50 ).getRelVal( 40 ); // Returns 2 (for 600px width)

{String} getSecondaryGridColor( )

Gets the color of the secondary grid
Since:
  • 1.13.3
Returns:
{ String } color - The secondary grid color

{String} getSecondaryGridDasharray( )

Gets the dasharray of the secondary grid lines
Since:
  • 1.13.3
Returns:
{ String } dasharray - The dasharray of the secondary grid lines

{Number} getSecondaryGridOpacity( )

Gets the opacity of the secondary grid lines
Since:
  • 1.13.3
Returns:
{ Number } opacity - The opacity of the secondary grid lines

{Number} getSecondaryGridWidth( )

Gets the width of the secondary grid lines
Since:
  • 1.13.3
Returns:
{ Number } width - The width of the secondary grid lines

{String} getSecondaryTicksColor( )

Gets the color of the secondary ticks
Since:
  • 1.13.2
Returns:
{ String } The color of the secondary ticks

{String} getTicksLabelColor( )

Gets the color of the tick labels
Since:
  • 1.13.2
Returns:
{ String } The color of the tick labels

{Number} getVal( Number pixels )

Transform a pixel position (referenced to the graph zone, not to the axis minimum) into a value, according to the axis scaling.
Parameters:
Name Type Description
pixels Number The number of pixels to translate into a value
Returns:
{ Number } The axis value corresponding to the pixel position

gridsOff( )

{Axis} gridsOff( )

Disables all the grids
Returns:
{ Axis } The current axis

{Axis} gridsOn( )

Enables all the grids
Returns:
{ Axis } The current axis

gridsOn( )

{Axis} hide( )

Hides the axis
Returns:
{ Axis } The current axis

{Boolean} isDisplayed( )

Returns:
{ Boolean } A boolean indicating the displayed state of the axis

{Boolean} isFlipped( )

Returns:
{ Boolean } The current flipping state of the axis

{Boolean} isX( )

Returns:
{ Boolean } true if it is an x axis, false otherwise

{Boolean} isY( )

Returns:
{ Boolean } true if it is an y axis, false otherwise

{Number} linkToAxis( Axis axis , SlaveAxisScalingFunction scalingFunction , Number decimals )

Makes this axis a slave. This can be used to show the same data with different units, specifically when a conversion function exists from axis -> slaveAxis but not in reverse. This axis should actually have no series.
Parameters:
Name Type Description
axis Axis The master axis
scalingFunction SlaveAxisScalingFunction The scaling function used to map masterValue -> slaveValue
decimals Number The number of decimals to round the value to
Returns:
{ Number } The width or height used by the axis (used internally)

{Axis} primaryGridOff( )

Disables primary grid
Returns:
{ Axis } The current axis

{Axis} primaryGridOn( )

Enables primary grid
Returns:
{ Axis } The current axis

{Axis} secondaryGridOff( )

Disables secondary grid
Returns:
{ Axis } The current axis

{Axis} secondaryGridOn( )

Enables secondary grid
Returns:
{ Axis } The current axis

{Axis} setAxisColor( String color )

Sets the axis color
Parameters:
Name Type Description
color String The color to set the axis
Since:
  • 1.13.2
Returns:
{ Axis } The current axis

{Axis} setAxisDataSpacing( Number min [ , Number max ] )

Sets the axis data spacing
Parameters:
Name Type Attributes Default Description
min Number The spacing at the axis min value
max Number <optional>
min The spacing at the axis max value. If omitted, will be equal to the "min" parameter
See:
  • AxisOptionsDefault
Returns:
{ Axis } The current axis

{Axis} setAxisDataSpacingMax( Number max )

Sets the axis data spacing at the maximum of the axis
Parameters:
Name Type Description
max Number The spacing at the axis max value
See:
  • AxisOptionsDefault
Returns:
{ Axis } The current axis

{Axis} setAxisDataSpacingMin( Number min )

Sets the axis data spacing at the minimum of the axis
Parameters:
Name Type Description
min Number The spacing at the axis min value
See:
  • AxisOptionsDefault
Returns:
{ Axis } The current axis

{Axis} setColor( String color )

Sets the color of the axis, the ticks and the label
Parameters:
Name Type Default Description
color String black The new color of the primary ticks
Since:
  • 2.0.82
Returns:
{ Axis } The current axis

{Axis} setCurrentMax( Number val )

Sets the current maximum value of the axis. If higher that the forced value, the forced value is used
Parameters:
Name Type Description
val Number The new maximum value
Returns:
{ Axis } The current axis

{Axis} setCurrentMin( Number val )

Sets the current minimum value of the axis. If lower that the forced value, the forced value is used
Parameters:
Name Type Description
val Number The new minimum value
Returns:
{ Axis } The current axis

{Axis} setDisplay( Boolean display )

Shows or hides the axis
Parameters:
Name Type Description
display Boolean true to display the axis, false to hide it
Returns:
{ Axis } The current axis

{Axis} setEngineering( Boolean engineeringScaling )

The engineer scaling is similar to the scientific scaling (Axis#setScientificScale) but allowing only mupltiples of 3 to be used to scale the axis (for instance, go from grams to kilograms while skipping decagrams and hexagrams)
Parameters:
Name Type Description
engineeringScaling Boolean true to turn on the engineering scaling
Since:
  • 1.13.3
See:
Returns:
{ Axis } The current axis

{Axis} setFloating( Axis axis , Number value )

Makes the axis floating (not aligned to the right or the left anymore). You need to specify another axis (perpendicular) and a value at which this axis should be located
Parameters:
Name Type Description
axis Axis The axis on which the current axis should be aligned to
value Number The value on which the current axis should be aligned
Returns:
{ Axis } The current axis
Example
graph.getYAxis().setFloat( graph.getBottomAxis(), 0 ); // Alignes the y axis with the origin of the bottom axis

{Axis} setGrids( Boolean on )

Displays or hides the axis grids
Parameters:
Name Type Description
on Boolean true to enable the grids, false to disable them
Returns:
{ Axis } The current axis

{Axis} setHighestMax( Number max )

Sets the highest maximum value of the axis.
Parameters:
Name Type Description
max Number The maximum value of the axis
Returns:
{ Axis } The current axis

{Axis} setLabel( Number label )

Sets the label of the axis
Parameters:
Name Type Description
label Number The label to display under the axis
Returns:
{ Axis } The current axis

{Axis} setLabelColor( String color )

Sets the color of the label
Parameters:
Name Type Description
color String The new color of the label
Since:
  • 1.13.2
Returns:
{ Axis } The current axis

{Axis} setLineAt( Array.<Number> atValues )

Forces the appearence of a straight perpendicular line at value 0
Parameters:
Name Type Description
atValues Array.<Number> An array of x or y values where the lines are displayed
Returns:
{ Axis } The current axis

{Axis} setLogScale( Boolean logScale )

Enables log scaling
Parameters:
Name Type Description
logScale Boolean ```true``` to enable the log scaling, ```false``` to disable it
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setLowestMin( Number max )

Sets the highest maximum value of the axis.
Parameters:
Name Type Description
max Number The maximum value of the axis
Returns:
{ Axis } The current axis

{Axis} setMinMaxToFitSeries( )

Resets the min and max of the serie to fit the series it contains
Returns:
{ Axis } The current axis

{Axis} setPrimaryGrid( Boolean on )

Displays or hides the axis primary grid
Parameters:
Name Type Description
on Boolean true to enable the grids, false to disable it
Returns:
{ Axis } The current axis

{Axis} setPrimaryGridColor( String color )

Sets the color of the primary grid
Parameters:
Name Type Description
color String The primary grid color
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setPrimaryGridDasharray( String dasharray )

Sets the dasharray of the primary grid lines
Parameters:
Name Type Description
dasharray String The dasharray of the primary grid lines
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setPrimaryGridOpacity( Number opacity )

Sets the opacity of the primary grid lines
Parameters:
Name Type Description
opacity Number The opacity of the primary grid lines
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setPrimaryGridWidth( Number width )

Sets the width of the primary grid lines
Parameters:
Name Type Description
width Number The width of the primary grid lines
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setPrimaryTicksColor( String color )

Sets the color of the main ticks
Parameters:
Name Type Description
color String The new color of the primary ticks
Since:
  • 1.13.2
Returns:
{ Axis } The current axis

{Axis} setScientific( Boolean on )

Enable the scientific mode for the axis values. This way, big numbers can be avoided, e.g. "1000000000" would be displayed 1 with 109 or "G" shown on near the axis unit.
Parameters:
Name Type Description
on Boolean Enables the scientific mode
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setScientificScaleExponent( Number scientificScaleExponent )

In the scientific mode, forces the axis to take a specific power of ten. Useful if you want to show kilometers instead of meters for example. In this case you would use "3" as a value.
Parameters:
Name Type Description
scientificScaleExponent Number Forces the scientific scale to take a defined power of ten
Since:
  • 1.13.3
See:
Returns:
{ Axis } The current axis

{Axis} setSecondaryGrid( Boolean on )

Displays or hides the axis secondary grid
Parameters:
Name Type Description
on Boolean true to enable the grids, false to disable it
Returns:
{ Axis } The current axis

{Axis} setSecondaryGridColor( String color )

Sets the color of the primary grid
Parameters:
Name Type Description
color String The primary grid color
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setSecondaryGridDasharray( String dasharray )

Sets the dasharray of the secondary grid lines
Parameters:
Name Type Description
dasharray String The dasharray of the secondary grid lines
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setSecondaryGridOpacity( Number opacity )

Sets the opacity of the secondary grid lines
Parameters:
Name Type Description
opacity Number The opacity of the secondary grid lines
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setSecondaryGridWidth( Number width )

Sets the width of the secondary grid lines
Parameters:
Name Type Description
width Number The width of the secondary grid lines
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setSecondaryTicksColor( String color )

Sets the color of the secondary ticks
Parameters:
Name Type Description
color String The new color of the secondary ticks
Since:
  • 1.13.2
Returns:
{ Axis } The current axis

{Axis} setTickPosition( Number pos )

Changes the tick position
Parameters:
Name Type Description
pos Number The new position ( "outside", "centered" or "inside" )
Returns:
{ Axis } The current axis

{Axis} setTicksLabelColor( String color )

Sets the color of the tick labels
Parameters:
Name Type Description
color String The new color of the tick labels
Since:
  • 1.13.2
Returns:
{ Axis } The current axis

{Axis} setUnit( String unit )

Sets the unit of the axis
Parameters:
Name Type Description
unit String The unit of the axis
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setUnitDecade( Boolean on )

Allows the unit to scale with thousands
Parameters:
Name Type Description
on Boolean Enables this mode
Since:
  • 1.13.3
Returns:
{ Axis } The current axis

{Axis} setUnitInTicks( Boolean bool )

Places the unit in every tick
Parameters:
Name Type Description
bool Boolean ```true``` to place the unit, ```false``` otherwise
Since:
  • 2.0.44
Returns:
{ Axis } The current axis

{Axis} setUnitWrapper( String before , String after )

Sets characters wrapping the unit
Parameters:
Name Type Description
before String The string to insert before
after String The string to insert after
Since:
  • 1.13.3
Returns:
{ Axis } The current axis
Example
axis.setUnitWrapper("[", "]").setUnit('m'); // Will display [m]

{Axis} show( )

Shows the axis
Returns:
{ Axis } The current axis

{String} valueToHtml( Number value , Boolean noScaling , Boolean noUnits )

Computes a value and returns it in HTML formatting
Parameters:
Name Type Description
value Number The value to compute
noScaling Boolean Does not display scaling
noUnits Boolean Does not display units
See:
  • Axis#valueToText
Returns:
{ String } An HTML string containing the computed value
Example
graph.getXAxis().setUnit( "m" ).setUnitDecade( true ).setScientific( true );
 graph.getXAxis().valueToHtml( 3500 ); // Returns "3.5 km"
 

{Axis} zoom( Number val1 , Number val2 )

Performs a zoom on the axis, without redraw afterwards
Parameters:
Name Type Description
val1 Number The new axis minimum
val2 Number The new axis maximum
Returns:
{ Axis } The current axis
Examples
graph.getBottomAxis().zoom( 50, 70 ); // Axis boundaries will be 50 and 70 after next redraw
graph.redraw();
graph.getBottomAxis().forceMin( 0 ).forceMax( 100 ).zoom( 50, 70 );  // Axis boundaries will be 50 and 70 after next redraw
graph.draw();
graph.autoscaleAxes(); // New bottom axis boundaries will be 0 and 100, not 50 and 70 !
graph.draw();

(inner) getPos( )

(inner) getPos( )