Class: XAxis

CIQ.ChartEngine. XAxis


new XAxis(init)

Defines an object used for rendering the X-axis on the chart, which can be adjusted immediately after declaring your new CIQ.ChartEngine(); The CIQ.ChartEngine.XAxis object is created by and part of the CIQ.ChartEngine.Chart object and is used on the main chart panel only. There is only one x axis per chart container.

Colors and fonts for the x axis can be controlled by manipulating the CSS. You can override the stx_xaxis class to change the font or colors.

For full customization instructions see:

Example: stxx.chart.xAxis

Parameters:
Name Type Description
init object

Object containing custom values for X-axis members

Example
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.chart.xAxis.formatter=formatFunction;

Members


adjustTimeZone :boolean

If true, the user selected (default browser if none selected) timezone will be used on the x axis. If not set to true, the data timezone will be used even if a user timezone was set.

Type:
  • boolean
Default Value:
  • true

displayBorder :boolean

Set to true to draw a line above the x-axis.

Type:
  • boolean
Default Value:
  • true

displayGridLines :boolean

Set to false to suppress grid lines

Type:
  • boolean
Default Value:
  • true

formatter :function

Optional function to format dates on x-axis. If defined, will be used to completely control x-axis formatting, including the floating HUD date of the crosshair.

This function should not be used to alter the timezone of the displayed date/time. For time zone conversions use CIQ.ChartEngine#setTimeZone

Expected format:

  • function(labelDate, gridType, timeUnit, timeUnitMultiplier, defaultText);

Parameters:

NameTypeDescription
labelDateDatejavaScript date to format
gridTypeString"boundary", "line", or name of drawing (e.g. "vertical") for the axis labels.
Absent for the floating crosshair label
timeUnitEnumerated typeCIQ.MILLISECOND
CIQ.SECOND
CIQ.MINUTE
CIQ.HOUR
CIQ.DAY
CIQ.MONTH
CIQ.YEAR
CIQ.DECADE
Absent for the floating crosshair label.
timeUnitMultiplierNumberHow many timeUnits.
Absent for the floating crosshair label.
defaultTextStringContains the default date label that would be used if no formatter is defined. Simply return this value for dates where no formatting is desired.

Returns:

  • Formatted text label for the particular date passed in.
Type:
  • function
Since:

  • • 3.0.0 Using x axis formatter now is available for year and month boundaries.
    • 6.3.0 Added `defaultText` parameter.
    • 6.3.0 Added drawing type as possible `gridType` value.
Examples
stxx.chart.xAxis.formatter = function(labelDate, gridType, timeUnit, timeUnitMultiplier, defaultText){
		// Your code here to format your string.
		// Example: always return HH:MM regardless of gridType,
		// even if gridType is a 'boundary' that normally would display 
		// a date in intro-day periodicity or a month in daily periodicity

		//You can always return back 'defaultText' if you do not wish to customize the particular value. 

		var stringDate = labelDate.getHours() + ':' + labelDate.getMinutes();
		return stringDate;
}
stxx.chart.xAxis.formatter = function(labelDate, gridType, timeUnit, timeUnitMultiplier, defaultText){
		// Your code here to format your string.
		// Example: return HH:MM when gridType is "line" otherwise returned the default text.

		if( gridType == "line" ) {
			var stringDate = labelDate.getHours() + ':' + labelDate.getMinutes();
			return stringDate;
		else
			return defaultText;
}

futureTicks :boolean

Set to false to hide axis markings in the future.

Type:
  • boolean
Default Value:
  • true

futureTicksInterval :number

Set to the number of minutes ticks will move by when iterating in "tick" interval.

Since 'tick' is not a time based display, there is no way to predict what the time between ticks will be. Ticks can come a second later, a minute later or even more depending on how active a particular instrument may be. As such, if iterating through the market day in 'tick' periodicity, the library uses a pre-defined number of minutes to move around. This will be primarily used when deciding where to put x axis labels when going into the future in 'tick' mode.

Type:
  • number
Since:
  • 3.0.0 default changed from 10 to 1.
Default Value:
  • 1
Example
//You can override this behavior as follows:
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.chart.xAxis.futureTicksInterval=1; // to set to 1 minute, for example

idealTickSizePixels :number

Ideal space between x-axis labels in pixels. If null then the chart will attempt a tick size and time unit in proportion to the chart. Please note that if stxx.chart.yAxis.goldenRatioYAxis is set to true, this setting will also affect the spacing between y-axis labels. Please note that this setting will be overwritten at rendering time if too small to prevent labels from covering each other. Not applicable if CIQ.ChartEngine.XAxis#timeUnit is manually set. See Custom X-axis for additional details.

Type:
  • number

minimumLabelWidth :number

Minimum size for label. This ensures adequate padding so that labels don't collide with one another. Please note that this setting is used during the rendering process, not during the label spacing calculation process and will be overwritten if too small to prevent labels from covering each other. To modify at what interval labels will be placed, please see Custom X-axis for more details

Type:
  • number
Default Value:
  • 50

noDraw :boolean

Switch to temporarily hide the x-axis. Set to `true' to activate.

Axis space will be maintained. To completely remove the x axis, including spacing use CIQ.ChartEngine#xaxisHeight

Type:
  • boolean
Since:
  • 3.0.0

timeUnit :number

Overrides default used in CIQ.ChartEngine#createTickXAxisWithDates
Allowable values:

  • CIQ.MILLISECOND,
  • CIQ.SECOND
  • CIQ.MINUTE
  • CIQ.HOUR
  • CIQ.DAY
  • CIQ.WEEK
  • CIQ.MONTH
  • CIQ.YEAR
  • CIQ.DECADE

Visual Reference for sample code below (draw a label every 5 seconds using 1 second periodicity ) :
xAxis.timeUnit

Type:
  • number
Example
// The following will cause the default implementation of createTickXAxisWithDates to print labels in seconds every 5 seconds.
// masterData is in 1 second intervals for this particular example.
stxx.chart.xAxis.timeUnit = CIQ.SECOND;
stxx.chart.xAxis.timeUnitMultiplier = 5;

timeUnitMultiplier :number

Overrides default used in CIQ.ChartEngine#createTickXAxisWithDates

Type:
  • number
Example
// The following will cause the default implementation of createTickXAxisWithDates to print labels in seconds every 5 seconds.
// masterData is in 1 second intervals for this particular example.
stxx.chart.xAxis.timeUnit = CIQ.SECOND;
stxx.chart.xAxis.timeUnitMultiplier = 5;