Trade

This page describes how to set up and configure the Trade component which displays the book depth for a specific asset symbol.

This includes:

  • a graphical/vertical bar chart view that shows market data and calculated statistics

  • an option to highlight price tick changes

Screenshot

Set up Trade

To set up a Trade component, click-and-drag the component into the workspace and configure the following:

  1. Assign a Data Connection configured for streaming. Use the html5eval connection as a sample if available.

  2. Assign list of asset Symbols for the trade panel dropdown.

     

    Sample Query

    q

    Copy
    ([]
        sym:`$("EUR/USD";"EUR/CHF";"EUR/GBP");
        pipsize:(0.0001 0.0001 0.0001)
    )

  3. Setup Panels options.

     

    Sample JSON

    JSON

    Copy
    [{"aggregation":"Exact","highlight":"On","id":1,"order":0,"priceLevel":6,"pipSize":0.0001,"sym":"EUR/USD"}]

Refer to Trade properties described in the next section for details on additional properties.

Trade properties

The following sections provides details on how to configure the properties of the Trade component.

Settings

Open the Settings properties on the right and configure the properties described in the following table.

Screenshot

Field

Description

Name

A name for the component provided by the user.

Data Connection

Connection for Trading Panel Subscriptions. See Overview for more details.

Symbols

A data source of asset symbols, sym and pipsize; The list of asset symbols are available in the Trade panel dropdown.

column

type

description

sym

symbol

asset symbol.

pipsize

float

determines the pre, major and minor part of the price quote.

Sample query:

q

Copy
([]
    sym:`$("EUR/USD";"EUR/CHF";"EUR/GBP");
    pipsize:(0.0001 0.0001 0.0001)
)

Panels

Stores user settings as JSON in a view state parameter.

 

The Sample JSON shown here is described in the following table.

JSON

Copy
[{"aggregation":"Exact","highlight":"On","id":1,"order":0,"priceLevel":6,"pipSize":0.0001,"sym":"EUR/USD"},
 {"aggregation":"Exact","highlight":"On","id":2,"order":0,"priceLevel":6,"pipSize":0.0001,"sym":"EUR/CHF"},
 {"aggregation":"Exact","highlight":"On","id":3,"order":0,"priceLevel":6,"pipSize":0.0001,"sym":"EUR/GBP"}
]

 

parameter

setting

aggregation

'Exact', 'One Level' or 'Two Level'.

highlight

'On' or 'Off' for color highlight.

id

Numeric reference.

order

Listing order for the panels starting from '0' for top left, then across.

pipsize

Corresponds to pipsize from Symbols data source; determines the pre, major and minor part of the price quote.

priceLevel

Corresponds to the number of prices returned from the API.

sym

Corresponds to sym from Symbol data source.

Quote Up

Define highlight color for price rise.

Quote Down

Define highlight color for price drops.

Number of Cells

The number of cells/bars displayed on the bid and ask side of the books.

Weighted Average

Displays either the VWAP (Volume Weighted Average Price) or TWAP (Time Weighted Average Price).

Style

Style for common settings

Field

Description

Bar Color

Define background color for Graph bars

Bar Text Color

Define font color for Graph bars

Bar Font Size

Define font size for Graph bars

Default Text Color

Define font color for price table

Default Font Size

Define font size for price table

Minor Price Font Size

Define font size for minor Price font in the quote box

Major Price Font

Define font size for major Price font in the quote box

Pre-Major Price Font Size

Define font size for pre major Price font in the quote box

Number of cells

The maximum number of trading panel cells. For infinte number of panels, set the property to 0

Highlight Change Duration

The length of time for the highlight (set in milliseconds)

Configure a Trade panel

Once you have set up your trade panel swich to Preview mode to display the panel.

Screenshot

  1. Select symbol from the dropdown

    Screenshot

  2. Click on the Settings icon to define a price aggregation level, use of highlight and price level (default: 6)

    Screenshot

Aggregation

setting

description

Exact

This is the default and uses the lowest pip granularity. Each price level/vertical bar represents the next pip.

One-Level

Aggregates pips into sets of 10. For example, if best bid is 1.38497 - the price level is reflected as 1.38490 and all available prices between 1.38490 and 1.38497 aggregate at the 1.38490 level.

The second bid level would be at 1.38480, which aggregates all available prices between1.38480 and 1.38489. Correspondingly, if the best ask or offer is at 1.38498, then all prices at 1.38498, 1.38499 and 138500 aggregate at the offer level of 1.38500 with the next offer level at 1.38510 aggregating prices between 1.38501 and 1.38510.

Two-level

Aggregate pips into sets of 100. A best bid of 1.38497 aggregates into the 1.38400 level, including all prices between 1.38400 and 1.38497.

 

A best offer at 1.38498 would aggregate 1.38498 to 1.38500 at 1.38500. The next offer of 1.38600 includes all offer prices between 1.38501 and 1.38600.

Subscriptions

Each trade panel requires a subscription to a streaming analytic. The analytic returns a detailed book depth for a specific asset symbol

Overview

The trading panel can subscribe to one of the following streaming analytics:

  1. book

  2. book1Agg

  3. book2Agg

Analytic Parameters

type

description

list

list of subscribing syms

level

the price level for subscribing sym

Analytic Type

  • Streaming

Analytics Description

The following are descriptions of each of required streaming analytics:

analytics

description

book (Exact)

lowest pip granularity and default option. Each price level/vertical bar represents the next pip

book1Agg (One-Level)

aggregates prices into sets of 10 pips. For example, if the best bid is 1.38497, the price level will be reflected as 1.38490 and all prices between 1.38490-1.38497 will be aggregated into the same level. The second best bid would be 1.38480 and represent prices from 1.38480 - 1.38489. Similarly, if the best offer was 1.38498, prices from 1.38498 - 1.38500 would aggregate to 1.38500. The second best offer level would be 1.38510.

book2Agg(Two-Level)

aggregates prices into sets of 100 pips. For example, if the best bid is 1.38497, the price level will be reflected as 1.38400 and all prices between 1.38400-1.38497 will be aggregated into the same level. The second best bid would be 1.38300 and represent prices from 1.38300 - 1.38399. Similarly, if the best offer was 1.38498, prices from 1.38498 - 1.38500 would aggregate to 1.38500. The second best offer level would be 1.38600.

Subscription key

For each of the trading panel subscriptions, it's keys are defined as follows: [aggregration Type]_[sym]_[panel Id]

  • aggregration Type : type of aggregration (book, book1Agg or book2Agg)

  • sym : the asset symbol

  • panel id : the unique id of the panel

Return Type

column

type

description

sym

symbol

Asset symbol

MDEntrySize

long

Market Data Entry Size

MDEntryPx

float

Market Data Entry Price

MDEntryType

byte

Market Data Entry Type.(0 Bid , 1 Offer)

FloorCode

int

Floor codes participating at each price level

MDVWAP

float

Market Data VWAP (Volume weighted average price)

 

float

Market Data TWAP (Time weighted average price)

Further Reading