API Reference
Namespaces
Classes
Events
Global
Externals

Class: Layout

CIQ.UI. Layout


new Layout(context [, params])

UI Helper for Layout changes, for instance tapping items on the display menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

This Helper is also responsible for initializing menu items in the "display" menu based on the chart layout

It can be extended to manage other layout events. For example, assuming the following HTML:

<cq-heading>Defaults</cq-heading>
<cq-item stxtap="Layout.doStuff('thing1')">Do this thing</cq-item>
<cq-item stxtap="Layout.doStuff('thing2')">Do this other thing</cq-item>
<cq-separator></cq-separator>
  • You would need the following corresponding function:
CIQ.UI.Layout.prototype.doStuff=function(node,whatToDo){
    var stx=this.context.stx;
    alert(whatToDo);
};

where the first parameter is always the node that was clicked, and can be manipulated to change as needed to add or remove styling, for example.

Parameters:
Name Type Argument Description
context CIQ.UI.Context

The context

params Object <optional>

Parameters

Properties
Name Type Argument Default Description
activeClassName String <optional>
"ciq-active"

The class name to be added to a node when a layout item is enabled

Since:
  • 4.1.0 Layout no longer takes a node as its first parameter

Methods


clearStudies( [node])

Removes all studies from the top most node.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The HTML user interface element used to clear all studies from the chart.


getLanguage(node)

Displays the current language in the language widget.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Parameters:
Name Type Description
node HTMLElement

The user interface element that enables users to select the chart language.

Since:
  • 6.1.0 Defaults to English.


setAggregationType( [node], aggregationType)

Convenience function to set the aggregation type from the Display drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setAggregationType.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to set the aggregation type.

aggregationType string

The aggregation type to be set.


setAnimation( [node])

Convenience function to set animation mode from the Display drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to enable and disable animation.

Since:
  • 8.4.0


setChartScale( [node], chartScale)

Convenience function to set the chart scale from the Display drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setChartScale.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to set the chart scale.

chartScale String

The type of scaling, such as "log", "linear", "percent", or "relative".


setChartType( [node], chartType)

Convenience function to set the chart style or aggregation type from the Display drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setChartType and CIQ.ChartEngine#setAggregationType.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to set the chart style or aggregation type.

chartType String

The chart style or aggregation type to be set.


setDataField(field)

Deprecated. Use CIQ.UI.Layout#setYaxisField instead.

Helper function that exposes CIQ.CrossSection#setYaxisField to the layout for access in the web components.

Parameters:
Name Type Description
arguments[0].node HTMLElement

The user interface element where the click or tap that calls this function originated.

arguments[0].params object

Additional information about where the click or tap originated, including the parent element.

field string

Specifies the type of values plotted on the y-axis of the cross section chart; for example, "yield", "bid", or "ask", which are the interest rate and trading prices of instruments in a term structure of interest rates.

Since:
  • 7.3.0
  • 8.3.0 Deprecated.
Deprecated:

setExtendedHours( [node])

Convenience function to set extended hours mode from the Display drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

See CIQ.Market and CIQ.ExtendedHours.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to enable and disable extended hours.


setFlippedChart( [node])

Convenience function to set the inverted y-axis mode from the Display drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#flipChart.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to flip the chart.

Since:
  • 6.3.0


setGroupField(field)

Helper function that exposes CIQ.CrossSection#setGroupField to the layout for access by the web components.

Parameters:
Name Type Description
arguments[0].node HTMLElement

The user interface element where the click or tap that calls this function originated.

arguments[0].params object

Additional information about where the click or tap originated, including the parent element.

field string

Specifies the field used to group items into subcurves; for example, "strike" or "expiration" for the strike price and expiration date of options.

Since:
  • 8.3.0


setL2Heatmap(node)

Parameters:
Name Type Description
node HTMLElement

The cq-item user interface element that enables users to enable the L2 Heat Map.


setLanguage()

Populates and displays the language widget.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface


setMarketDepth( [node])

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The cq-item user interface element that enables users to enable the Market-Depth chart panel.


setOutliers( [node])

Convenience function that toggles the outliers layout property between on and off (true and false). Invoked from the Display drop-down menu.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to show and hide outliers.

Since:
  • 7.5.0


setPeriodicity( [node], periodicity, interval, timeUnit)

Convenience function to set periodicity from the drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setPeriodicity.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to set periodicity.

periodicity number

Same as period from CIQ.ChartEngine#setPeriodicity.

interval number

Same as interval from CIQ.ChartEngine#setPeriodicity.

timeUnit number

Same as timeUnit from CIQ.ChartEngine#setPeriodicity.


setRangeSlider( [node])

Convenience function to toggle the range slider mode from the Display drop-down menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

See CIQ.RangeSlider.

Parameters:
Name Type Argument Description
node HTMLElement <optional>

The user interface element that enables users to enable and disable the range slider.


setXaxisField(field)

Helper function that exposes CIQ.CrossSection#setXaxisField to the layout for access by the web components.

Parameters:
Name Type Description
arguments[0].node HTMLElement

The user interface element where the click or tap that calls this function originated.

arguments[0].params object

Additional information about where the click or tap originated, including the parent element.

field string

Specifies the type of values plotted on the x-axis of the cross section chart; for example, "strike" or "expiration" for the strike price and expiration date of options.

Since:
  • 8.3.0


setYaxisField(field [, aggOperator])

Helper function that exposes CIQ.CrossSection#setYaxisField to the layout for access by the web components.

Parameters:
Name Type Argument Description
arguments[0].node HTMLElement

The user interface element where the click or tap that calls this function originated.

arguments[0].params object

Additional information about where the click or tap originated, including the parent element.

field string

Specifies the type of values plotted on the y-axis of the cross section graph; for example, "yield", "bid", "mid", or "ask", which are the interest rate and trading prices for instruments in a term structure of interest rates.

aggOperator string <optional>

Specifies how multiple values for the same record are aggregated. The value plotted on the y-axis is the result of the aggregation operation. See CIQ.CrossSection#setYaxisField for valid values.

Since:
  • 8.3.0

Example
<div class="ciq-dropdowns">
	<cq-menu class="ciq-menu">
		<cq-clickable stxbind="Layout.yaxisField" class="ciq-yaxisField-span">
			Yield
		</cq-clickable>
		<cq-menu-dropdown class="ciq-value-dropdown">
			<cq-item stxtap="Layout.setYaxisField('yield')">Yield</cq-item>
			<cq-item stxtap="Layout.setYaxisField('bid')">Bid</cq-item>
			<cq-item stxtap="Layout.setYaxisField('mid')">Mid</cq-item>
			<cq-item stxtap="Layout.setYaxisField('ask')">Ask</cq-item>
		</cq-menu-dropdown>
	</cq-menu>
</div>

showPeriodicity(stx, params)

Sets the display periodicity.

Usually this is called from an observer that is in CIQ.UI.Layout#periodicity

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface

Parameters:
Name Type Description
stx CIQ.ChartEngine

The chart object to examine for periodicity

params Object

Parameters

Properties
Name Type Description
selector HTMLElement

The selector to update


toggleHelp()

Toggles help-active attribute in context element, enabling display of cq-help components.

Since:
  • 8.4.0