API Reference
Namespaces
Classes
Events
Global
Externals

Class: TFC

CIQ. TFC


new TFC(config)

The Trade From Chart (TFC) plug-in. TFC may be constructed multiple times and associated with multiple charts. Each TFC instance requires a CIQ.Account object for querying brokerage account data and placing orders. Typically, TFC instances share the same account object, but each instance can also have a unique account object.

The same account object can be added to all TFC instances through the account property of the tfc plug-in configuration in the default configuration object. Unique accounts for all TFC instances can be enabled by the allowUniqueAccountConstruction property of the tfc plug-in configuration. See the Chart Configuration tutorial for more information. See CIQ.Account for account data format.

The plug-in creates and manages DOM elements that are located in plugins/tfc/config.js.

The TFC panel can be toggled using the Ctrl+Alt+T keystroke combination (see the tfc action in hotkeyConfig.hotkeys in js/defaultConfiguration.js).

See the Trade From Chart Introduction for implementation details.

Parameters:
Name Type Description
config object

Configuration parameters.

Properties
Name Type Argument Description
stx CIQ.ChartEngine

A reference to the chart engine.

account CIQ.Account <optional>

Account object for querying a brokerage and placing trades. If this parameter is omitted, the plug-in uses the CIQ.Account.Demo demo account.

chart CIQ.ChartEngine.Chart <optional>

The specific chart (panel) for trading componentry. Defaults to the default chart.

context CIQ.UI.Context <optional>

UI context for interaction between TFC and the UI (for example, switching the chart's symbol).

container HTMLElement <optional>

The DOM element to which the TFC toggle is attached.

loadTemplate boolean <optional>

Set to false if the Trade from Chart markup is already present in the document.

htmlTemplate string <optional>

Markup string to use instead of the default loaded HTML string.

loadSample boolean <optional>

Set to true to load the sample demo account.

Since:
  • 6.2.0 Added context parameter.
  • 8.1.0 Added config.loadTemplate and config.htmlTemplate.
  • 8.4.0 Added config.loadSample.
  • 8.8.0 Added config.container element.
  • 8.9.0 Added multi chart support

Members


dom :Object

Holds references to the top-level DOM elements that are used with TFC. These elements are appended to the chart container in CIQ.TFC.prototype.construct.

Type:
  • Object
Properties:
Name Type Description
dragLineAbove HTMLElement

The draggable line that is above the price (stop or limit).

dragLineCenter HTMLElement

The draggable line at the center of a limit/stop order.

dragLineBelow HTMLElement

The draggable line that is below the price (stop or limit).

marketOrder HTMLElement

The market order widget.

limitOrder HTMLElement

The limit/stop order widget.

otoAbove HTMLElement

The OTO widget above the dragLineAbove.

otoBelow HTMLElement

The OTO widget below the dragLineBelow.

ocoOrder HTMLElement

The OCO order widget (located below the ocoBelow).

ocoAbove HTMLElement

The OCO widget that is the above line.

ocoBelow HTMLElement

The OCO widget that is the below line.

shadeAbove HTMLElement

Shading above an OCO.

shadeBelow HTMLElement

Shading below an OCO.


elements :Object

Contains references to all of the individual HTML elements that may need to be referenced. Each of these elements would be a sub element of one of the top level elements contained in CIQ.TFC.prototype.dom.

Type:
  • Object

ephemeralNodes :Object

When a template is instantiated, a reference is saved in ephemeralNodes so that it can be deleted at a future time

Type:
  • Object
Properties:
Name Type Description
openOrders array

Array of instantiated openOrders templates


Contains references to each type of action. For each action a menu item is specified as "node". The dom array should contain each of the TFC components that are to be enabled for that type of order

Type:
  • Object

panelElements :Object

Contains references to all of the individual HTML elements on TFC panel itself that may need to be referenced.

Type:
  • Object

templates :Object

Contains references to templates (HTML objects) that are reusable

Type:
  • Object
Properties:
Name Type Description
openOrderMarker HTMLElement

The template used to create open order markers

Methods


addOTOLimit( [initialPrice])

Adds a limit widget to an active buy or short trade. The limit widget will be either on the bottom or top depending on whether it is a buy or short trade and the user can position it. When a limit (or stop) is added to such a trade, it will be placed as an OTO (one trigger other) trade.

Parameters:
Name Type Argument Description
initialPrice number <optional>

The initial price to place the trade. If not set then the price will be computed visually, so that the limit widget does not overlap the buy/short widget.


addOTOStop( [initialPrice])

Adds a stop widget to an active buy or short trade. The stop widget will be either on the bottom or top depending on whether it is a buy or short trade and the user can position it. When a stop (or limit) is added to such a trade, it will be placed as an OTO (one trigger other) trade.

Parameters:
Name Type Argument Description
initialPrice number <optional>

The initial price to place the trade. If not set then the price will be computed visually, so that the stop widget does not overlap the buy/short widget.


cancelOpenOrder()

Places a cancel request for the current open order. Cancel requests are deferred through the brokerage Account object.


changePositionsView(viewType)

This changes the view of the positions section. The following views are supported: summary view: symbol, quantity, basis price, gl, gl% (positions only) lots view: symbol date, quantity, basis price, price, gl% (trades only) performance view: symbol, basis value, mv, gl% (positions only) maintenance view: symbol, price, gl%, close (positions) quantity, sl, tp, gl%, close (trades)

This will set the view type of the TFC object

Parameters:
Name Type Description
viewType string

View type, see above for supported views


changeSymbol()

This method should be called whenever the symbol is changed. Any existing, unfinished orders will be closed out. New open orders will be fetched and displayed.


clearActive()

Clears out the "active" class from menu items, so that they no longer have active styling. Also clears the share and currency input boxes. Any existing trading UI elements will be closed except for the market order widget which will remain open.


clearEphemeral(which)

Removes all the ephemeral nodes (open order tags). This occurs typically when the symbol is changed. Or TFC is disabled.

Parameters:
Name Type Description
which string

Which ephemeral nodes to clear out (i.e. "openOrders")


closeTFC()

Closes a floating 'Trade From Chart' widget.

Any active trading elements are hidden. The chart itself is scrolled back to its initial margins. Open orders remain displayed.


configureMenu()

The TFC menu is dynamic based on whether the account contains a current position for the security, and whether that position is long or short. This method configures the menu as such by looking at the account's current position for the enabled security.


confirmCloseAllPositions()

Creates a confirmation dialog for closing all trades/positions. Once the confirmation is made the call to close all is made to the account.


confirmClosePosition()

Creates a confirmation dialog for closing one position.


confirmCloseTrade()

Creates a confirmation dialog for closing one trade.


confirmOCO()

Creates a confirmation dialog for an OCO (one cancels the other) order. This will be used for straddles, strangles, and brackets. This method will return without enabling the dialog if the quantity has not been specified.


confirmOrPlaceOrder(type, action)

Either confirms or places the order depending on whether this.config.skipConfirms is set to true or not

Parameters:
Name Type Description
type string

Either "order","oco" or "replace" depending on the type of order

action string

The order action ("limit_buy","limit_sell","limit_short","limit_cover")


confirmOrder(order)

Creates a confirmation dialog for an order. This method will return without enabling the dialog if no quantity has been specified.

Parameters:
Name Type Description
order Object

The order to place


confirmReplace()

Creates the confirmation dialog for a replace order. This does nothing if no change is detected between the original and new orders. The class "no-change" is appended to an html element in the dialog if no change in that parameter occurred, for instance quantity may not change but price may. This class can be used to style the dialog to indicate which values are changing.


confirmVspTrade()

Creates a confirmation dialog for reducing one trade (vsp).


construct(config)

This constructs the Trade From the Chart object. It is called from the actual object constructor. Within, we instantiate all of the components that can be used in TFC and we set up all of the event handlers. TFC makes use of the "CIQ.safe" event handlers to seamlessly handle both touch and mouse events through one interface.

Parameters:
Name Type Description
config object

Configuration object

Properties
Name Type Argument Description
stx object

The chart object to enable TFC.

account object

Valid CIQ.Account object for querying brokerage and placing trades

chart object <optional>

The specific chart (panel) for trading componentry. Defaults to the default chart.

skipConfirms boolean <optional>

If set to true then there will be no confirm messages. Pressing buy or sell buttons will place a trade!


createDescription(order)

Creates a text printable description of an order. This is used when generating various types of order tickets.

Parameters:
Name Type Description
order object

An order object

Returns:

A text description of the order

Type
string

createOCOFromGUI()

Creates an OCO order from the position and input values in the GUI. The OCO is an array consisting of two orders. This format can be received by the order interface in CIQ.Account.

Returns:

A tuple containing the two orders

Type
array

createOpenOrderMarker(openOrder [, baseOrderMarker])

Creates the open order markers and attaches safe mouse/touch events to them. An open order can be modified by clicking on it. Also, crosshairs are turned off as a user hovers over an open order marker. This method is called recursively for OTO orders. OTO orders are given the "pending" class attachment to render them differently. Clicking on an OTO pulls up the modification of the base order (including OTO legs).

Parameters:
Name Type Argument Description
openOrder object

An open order in the expected format

baseOrderMarker object <optional>

The linked order if it is an OTO order.


createOrderFromGUI(action)

Creates an order from the positioning and input values of the GUI elements. The order will be in a format that can be placed through the CIQ.Account interface. This will include OTO orders, but not OCO orders which are created in CIQ.TFC.prototype.createOCOFromGUI.

Parameters:
Name Type Description
action string

The order type ("limit_buy","limit_sell","limit_short","limit_cover")

Returns:

The order

Type
object

createReplaceFromGUI()

Creates a replace order from the positioning and input values of the GUI elements. The order will be in a format that can be placed through the CIQ.Account interface. This will include OTO orders. The format for replace orders is to create a an object for each order parameter that includes a "old" and "new" value.

Returns:

The order

Type
object

crosshairsOff()

Turns the crosshairs off while the mouse is passing over an object such as an open order marker


crosshairsOn()

Turns the crosshairs on when the mouse passes out of an object such as an open order marker


deriveOpenOrderMarkers()

Creates open order markers from the openOrders in the Account object


dragAboveLine(e)

Called from an CIQ.safeDrag operation when the above line has been grabbed. Recalculates the above price and repositions the above elements.

Parameters:
Name Type Description
e Event

A JS event from a CIQ.safeDrag operation (displacementY is expected)


dragBelowLine(e)

Called from an CIQ.safeDrag operation when the below line has been grabbed. Recalculates the below price and repositions the below elements.

Parameters:
Name Type Description
e Event

A JS event from a CIQ.safeDrag operation (displacementY is expected)


dragCenterLine(e)

Called from an CIQ.safeDrag operation when the center line has been grabbed. Recalculates the center price and repositions the center elements.

Parameters:
Name Type Description
e Event

A JS event from a CIQ.safeDrag operation (displacementY is expected)


dragMarketOrder(e)

Callback method for when marker order widget is dragged. This does nothing but reposition the widget for the convenience of the user.

Parameters:
Name Type Description
e Event

The mouse or touch event


dragOrdersHeader(e)

Called from an CIQ.safeDrag operation when the open orders header has been grabbed.

Parameters:
Name Type Description
e Event

A JS event from a CIQ.safeDrag operation (displacementY is expected)


enableAccount(account)

Enables an account. Without an enabled account TFC will not operate.

Parameters:
Name Type Description
account CIQ.TFC.Account

The account to enable


enableBracket( [params])

Enables a bracket order. A bracket order is, specifically, an OCO (one cancels the other) with stop and limit legs, to close an open position. The bracket order will calculate the risk/reward for the open position. Note that the system does not support modification of an OCO specifically but rather modification of one or the other legs. If the brokerage supports/requires modification of a complete OCO, then the translation layer should make that adjustment.

Parameters:
Name Type Argument Description
params object <optional>

Initial parameters only used when bracketing a specific trade or position to obtain the current quantity.


enableBuy( [params])

Enables a buy order.

Note the concept of "limit" and "stop" lose some of their meaning in the context of trading from the chart. What we are actually doing is setting a price that, if the security hits that price, creates a market order. This is the true and original meaning of a limit or stop order. The distinction regarding which way the stock is traveling is not significant in the context of trading from the chart. As such, a "limit" order in this context could be a stop or a limit when initiating a trade.

However, when closing a position, the meaning of stop and limit take on more significance. When closing a position, we want to "stop our loss" or "limit our gains" and thus when we place a bracket (or one leg of a bracket) around an initial positions, we do use the "stop" and "loss" terminology.

The "buy" order is used only for initiating a long position. @see CIQ.TFC.prototype.enableCover for covering a short position.

Parameters:
Name Type Argument Description
params object <optional>

Initial parameters for the order, only used if we are modifying an open order and need to derive the initial price from that order.


enableCover( [params])

Enables a buy to cover order (closing a short position)

Parameters:
Name Type Argument Description
params object <optional>

Initial parameters only used when modifying an open order to obtain the current limit/stop price.


enableMarket()

Enables the market order widget


enableSell( [params])

Enables a sell order.

Parameters:
Name Type Argument Description
params object <optional>

Initial parameters for the order, only used when modifying an open order to obtain the current limit/stop price.


enableShort( [params])

Enable a short order (selling to open a position)

Parameters:
Name Type Argument Description
params object <optional>

Initial parameters only used when modifying an open order to obtain the current limit/stop price.


enableStraddle()

Enable a straddle order. A straddle is, specifically, an OCO (one cancels the other) to open a position. The goal of the straddle is to capture a breakout from a presumed trading range. The resulting position may be either long or short.

Straddle is also referred to as breakout.


enableStrangle()

Enable a strangle order. A strangle is, specifically, an OCO (one cancels the other) to open a position. The goal of the straddle is to profit when a security bounces within a presumed trading range. The resulting position may be either long or short.

Strangle is also referred to as swing trade.


endDrag(e, node)

End method for a drag operation. Callback from CIQ.safeDrag

Parameters:
Name Type Description
e Event

The mouse or touch event

node HTMLElement

The element that was dragged


establishMenu()

Adds touch/click events to menu items


formatInnerValue(value)

Rounds the innerValue used by elements for calculations. This is separate from the displayed value that the user will see.

Parameters:
Name Type Description
value number
Since:
  • 7.1.0

Returns:
Type
number

formatPrice(price, internationalize)

Formats a price according to the conventions used on the y-axis. This should ensure that trade prices are always the same number of decimal places as the security currently trades. It will further ensure that decimal places do not exceed this.tradability.maxDecimalPlaces

Parameters:
Name Type Description
price number

The price to format

internationalize boolean

Normally this function will return an internationalized result. Set this param to false to bypass.

Since:
  • 6.1.0 Added internationalize argument

Returns:

The price formatted as text, fixed to the appropriate number of decimal places

Type
string

getBidAsk()

Gets the current bid and ask.

Since:
  • 6.1.0

Returns:

Bid and Ask price

Type
object

getCurrentPriceForOrder()

Gets the current price for placing an order. Will return bid or ask if available, otherwise close. It will adjust to ensure it is within the stx.chart.yAxis.minimumPriceTick range param {string} activeTrade Type of order being placed

Since:
  • 15-07-01

Returns:

Bid or Ask or Close, depending on the order side

Type
number

hideAllDOM()

Hides all of the top-level widgets contained in CIQ.TFC.prototype.dom. This is called when closing the TFC.


initializeOrderPrice(params)

Sets the initial order price. This is either the current quote for the security or, if modifying an order the current limit or stop price for the order.

Parameters:
Name Type Description
params object

Optional parameters


instantiateTemplate(template, which)

Instantiates a new element from a template. The new element is ephemeral, and stored in CIQ.TFC.prototype.ephemeralNodes.

Parameters:
Name Type Description
template HTMLElement

The template to utilize

which string

Which type of ephemeral node this is (i.e. "openOrders")

Returns:

The newly instantiated node

Type
HTMLElement

locationFromPrice(p)

Returns the y-position for a node given the price

Parameters:
Name Type Description
p number

The requested price

Returns:

The y-position (within the chart panel)

Type
number

modalBegin()

Puts the chart into a modal mode when the user is mousing over a TFC element. This prevents the chart from scrolling with mouse movements or intercepting key strokes.


modalEnd()

Takes the chart out of modal mode when the user mouses out of a TFC element.


modifyOpenOrder(openOrderMarker)

Enables/creates the widgets necessary to modify an open order. The same widgets that are used to create a new order are used, so the main job of this function is to figure out the type of order and instantiate those widgets at the price levels of the current open order.

Parameters:
Name Type Description
openOrderMarker HTMLElement

The open order marker to modify. It is assumed that the marker contains a reference to the actual open order.


newTrade(componentName [, params])

Creates a new trade of the requested type. Crosshairs are automatically turned off, but the prior crosshair state is remembered for when TFC is closed. The chart is scrolled left in order to make room for the TFC widgets.

Parameters:
Name Type Argument Description
componentName string

The component to enable (i.e. "enableMarket")

params object <optional>

If the result of the user clicking on an open order marker to modify, then the open order will be passed in the params.


openPanel(isActive)

Open panel if value true close when false

Parameters:
Name Type Description
isActive boolean

True to open panel, false to close.


openTFC()

Opens Trade From Chart.

The menu is configured for the current security and open orders are retrieved and displayed.

Deprecated:
  • as of 5.0.0


overlap(a, b)

Determines whether a and b overlap vertically on the screen. This method is specific to TFC, assuming that elements are positioned using style.top.

Parameters:
Name Type Description
a HTMLElement

The first element

b HTMLElement

The second element

Returns:

True if they overlap, otherwise false.

Type
boolean

placeOrder(order)

Places an order or modification. Defers to the current brokerage Account object. When the order is placed the widgets are cleared out unless the user is trading with market orders in which case the widget remains in place.

Parameters:
Name Type Description
order object

The order to place


populateMarket()

Populates the market order widget with the position's shares


positionAboveLine(price)

Positions the "above line" which is the top line in an OCO or OTO order. For OTO orders, it is made sure that the above element does not overlap the order element but does allow the above line to slide underneath.

Parameters:
Name Type Description
price number

The price to set the above line


positionAtPrice(price, nodes [, where] [, noOverlap] [, keepOnChart])

Positions nodes at the given price.

Parameters:
Name Type Argument Description
price number

The price (relative to the y-axis)

nodes array

An array of nodes to move to the desired location

where string <optional>

If either "top" or "bottom", then the node will not be allowed to overlap the noOverlap nodes

noOverlap array <optional>

An array of nodes which cannot be overlapped

keepOnChart boolean <optional>

If true then the nodes will not be allowed to move off the chart


positionBelowLine(price)

Positions the "below line" which is the bottom line in an OCO or OTO order. For OTO orders, it is made sure that the below element does not overlap the order element but does allow the below line to slide underneath.

Parameters:
Name Type Description
price number

The price to set the below line


positionCenterLine(price [, keepOnChart])

Positions the center line at the requested price. The center line is the line that runs through the middle of a (buy, sell, short, cover) widget and represents the limit or stop price for the trade.

Parameters:
Name Type Argument Default Description
price number

The price to set the center line

keepOnChart boolean <optional>
true

Optional prevent the node from being displayed off the chart


priceFromLocation(y)

Returns the price given the location (top) of a node. Adjusts for panel position in the chart. It will adjust to ensure it is within the stx.chart.yAxis.minimumPriceTick range

Parameters:
Name Type Description
y number

The location of the node (assumed to be included in a holder that is aligned with the chart panel)

Returns:

The price represented by that y position

Type
number

printableOTO(oto)

Creates a printable description of the oto legs for an order. This description is used to create the confirmation dialogs.

Parameters:
Name Type Description
oto array

An array of orders in the oto

Returns:

The printable description

Type
string

printablePrice(order)

Convenience function for creating a printable text label for the price of an order. This will be "MKT" or "xxx" or "xxx STP" or "xxx MIT".

Parameters:
Name Type Description
order object

The order

Returns:

The printable text.

Type
string

quantityFromValue(value)

Returns a quantity given a string value which may contain commas.

Parameters:
Name Type Description
value string

Value from an input box

Returns:

A valid quantity, float

Type
number

refreshScrollWindows()

Refreshes the Scroller mechanism for the positions and open orders widgets in the expanded panel.


removeOTOAbove()

Removes the OTO order (stop or limit) that is above the buy/short order.


removeOTOBelow()

Removes the OTO order that is below the buy/short order.


render()

Places the currently enabled elements along their y-axis depending on the prices that have been set. This gets called whenever the screen is panned, zoomed or resized because the placement is relative to the size of the chart itself. It also ensures that the shaded areas do not extend past the top and bottom of the chart panel.


renderOpenOrders()

Positions the open orders on the screen at the appropriate location. If they are off the y-axis then they will pile up at the top or bottom of the screen. If a marker overlaps another, then its width is extended so that it can be visible.


renderTrades()

Positions the trade lines on the chart. These demarcate the holdings and their bases. These will begin at the acquisition date and extend to the right.


setActiveInput(activeInput)

Sets the active input to either "shares" or "currency". This will determine which calculations are made as the user moves the TFC widgets up and down the y-axis. For instance, if the user last set the currency value, then the shares will change as the TFC widgets are moved.

Parameters:
Name Type Description
activeInput string

Either "shares" or "currency".


setResizeCallback(resizeCallback)

Sets a callback to be called when the screen needs to be resized. Used when the size of the TFC window is modified.

Parameters:
Name Type Description
resizeCallback function

The resize callback (i.e. resizeScreen())


setupChartControls(params)

Creates and sets up references to the chart controls: markers, dialogs.

Parameters:
Name Type Description
params object

Configuratioon parameters

Properties
Name Type Description
context CIQ.UI.Context

The chart user interface context.

stx CIQ.ChartEngine

A reference to the chart engine.

Since:
  • 8.9.0


snapPrice()

Adjust price to ensure it is within the stx.chart.yAxis.minimumPriceTick range param {number} price The price to snap to the closest minimumPriceTick.

Since:
  • 16-04-01

Returns:

adjusted price conforming to minimumPriceTick

Type
number

startDrag(e, node)

Start method for a drag operation. Callback from CIQ.safeDrag

Parameters:
Name Type Description
e Event

The mouse or touch event

node HTMLElement

The element that is being dragged


startDragOrdersHeader(e, node)

Start method for a drag operation for the orders header. Callback from CIQ.safeDrag

Parameters:
Name Type Description
e Event

The mouse or touch event

node HTMLElement

The element that is being dragged


switchContext(context)

Switches tfc connected chart

Parameters:
Name Type Description
context CIQ.UI.Context

The chart user interface context.

Since:
  • 8.9.0


tifHasChanged()

Checks if TIF has changed to/from MKT so it can set member var and redraw the form


updateAccountUI()

Updates account UI settings.


updateData()

Creates the balances, open orders and positions tables for the current security, first by fetching the data, then by creating markers for them, and finally by rendering the markers. This method can be called any time a data refresh is required. The ref parameter is used to indicate that updateData is used for display synchronization and contains the TFC instance that instantiated synchronization


updateValues()

Updates all of the numerical values on the screen including shares, currency, risk/reward, and profit & loss. This method is called whenever the user enables or manipulates a TFC element.


userAction(action)

Called when a user submits an order or replace. This will pull up the appropriate confirmation dialog, assuming all order parameters have been filled in.

Parameters:
Name Type Description
action string

The type of action


dismissDialog()

Dismisses any active dialogs


displayDialog(id)

Displays a dialog.

Parameters:
Name Type Description
id HTMLElement | string

Identifies the dialog to be displayed. Can be either the HTML element that represents the dialog or a CSS selector that identifies the element. The selector can be used to obtain a reference to the dialog element; for example, dialogNode = document.querySelector(id).

Since:
  • 7.4.0 Allows the id parameter to be a DOM element.