Skip to main content

Trading Platform methods

Trading Platform is a standalone client-side solution that provides trading capabilities. To use Trading Platform, in addition to the required Datafeed API methods, you should implement the quote-related methods, including getQuotes, subscribeQuotes, and unsubscribeQuotes. The library calls these methods to request quotes, which are data sets that describe the current prices. Quotes are used in most Trading Platform features including the following:

For DOM, you should also implement the subscribeDepth and unsubscribeDepth methods.

tip

For Trading Platform, along with implementing the Datafeed API methods, you also need to implement the Broker API. Refer to Core trading concepts for more information.

getQuotes​

Trading Platform calls getQuotes to request quote data that is used to display the Watchlist, Details, Order Ticket, DOM widgets, and the Legend. To transfer the requested data, pass an array of QuoteData objects as a parameter to QuotesCallback. The library expects to receive necessary data in a single callback.

caution

Note that if you integrate the library with mobile applications, getQuotes is required to avoid NaN values appearing in the legend.

The example of QuoteData is demonstrated below:

{
    {
        "s": "ok",
        "n": "NasdaqNM:AAPL",
        "v": {
            "ch": 0,
            "chp": 0,
            "short_name": "AAPL",
            "exchange": "",
            "original_name": "NasdaqNM:AAPL",
            "description": "NasdaqNM:AAPL",
            "lp": 173.68,
            "ask": 173.68,
            "bid": 173.68,
            "open_price": 173.68,
            "high_price": 173.68,
            "low_price": 173.68,
            "prev_close_price": 172.77,
            "volume": 173.68
        }
    }
}

Note that Percentage change value, Ask/Bid buttons and lines also require quote data. They are not displayed on the chart if getQuotes is not implemented.

Datafeed API buttons

The following piece of code is just a snippet to begin with. You will have to change it to fit your requirements but copying & pasting the code below should enable displaying values in the Legend when on mobile along with values for ask and bid buttons (if activated within the Chart settings) when using Trading Platform. subscribeQuotes will however updates the values on regular basis.

// In this example we are returning random values (which probably don't make any sense from a trading purpose)
// but it is just to illustrate how to structure the function and returned object.
getQuotes(symbols, onDataCallback, onErrorCallback) {
    const data = [];

    symbols.forEach((symbol)=>{
        data.push({
            n: symbol,
            s: 'ok',
            v: {
                ch: Math.random() * (5 - 1) + 1,
                chp: Math.random() * (5 - 1) + 1,
                lp: Math.random() * (10 - 1) + 1,
                ask: Math.random() * (10 - 1) + 1,
                bid: Math.random() * (10 - 1) + 1,
                spread: 0.20,
                open_price: Math.random() * (5 - 1) + 1,
                high_price: Math.random() * (5 - 1) + 1,
                low_price: Math.random() * (5 - 1) + 1,
                prev_close_price: Math.random() * (5 - 1) + 1,
                original_name: symbol,
                volume: Math.random() * (5 - 1) + 1,
            },
        });
    });

    // To ensure the callback is only evoked when the library is ready - see Asynchronous callbacks
    setTimeout(() => onDataCallback(data), 0);
}

subscribeQuotes​

The library calls subscribeQuotes to receive real-time quote updates for certain symbols. Call QuotesCallback every time you want to update the quotes and pass an array of QuoteData objects as a parameter.

The following piece of code is just a snippet to begin with. You will have to change it to fit your requirements but copying & pasting the code below should render different values in the Legend when on mobile along with values for ask and bid buttons (if activated within the Chart settings). unsubscribeQuotes will however updates the values on regular basis.

subscribeQuotes(symbols, fastSymbols, onRealtimeCallback, listenerGUID) {
    // In this example, `_quotesSubscriptions` is a global variable used to clear the subscription in `unsubscribeQuotes`
    this._quotesSubscriptions[listenerGUID] = setInterval(() => this.getQuotes(symbols.concat(fastSymbols), onRealtimeCallback, () => undefined), 5000);
}

unsubscribeQuotes​

The library calls unsubscribeQuotes to stop receiving updates for the symbol when the user removes it from the Watchlist or selects another symbol on the chart. The listenerGuid argument contains the same object that was passed to subscribeQuotes before.

The following piece of code is just a snippet to begin with. You will have to change it to fit your requirements but copying & pasting the code below should stop updating the values created by subscribeQuotes.

unsubscribeQuotes(listenerGUID) {
    clearInterval(this._quotesSubscriptions[listenerGUID]);
}

subscribeDepth​

The library calls subscribeDepth to receive real-time Level 2 (DOM) data for a symbol. Call DOMCallback every time you want to update the quotes and pass a DOMData object as a parameter.

Note that you should specify the broker_config property in the Widget Constructor and set supportLevel2Data to true. Otherwise, the library does not call the subscribeDepth/unsubscribeDepth methods.

This method should return a unique identifier (subscriberUID) that is used to unsubscribe from updates.

unsubscribeDepth​

The library calls unsubscribeDepth to stop receiving DOM data updates. The subscriberUID argument contains the same object that was returned by subscribeDepth.