DTN API & Widget Documentation

Installation

npm

@dtn/advanced-futures-chart-widget

script

https://pre-content-services.dtn.com/ui-widgets/advanced-futures-chart-widget/advanced-futures-chart-widget.js

Example

window.dtn.futures.createAdvancedFuturesChartWidget({
    "container": "#advanced-futures-chart-widget",
    "token": "dtRmvW6JtQAYuSAFGEiGkQMcsZbMIa2E",
    "user": "firstname.lastname",
    "locale": "en_US",
    "symbolConfig": {
        "symbol": "@C@1",
        "isDescriptionVisible": true,
        "isSymbolVisible": true
    }
});

Configuration

token

token: string;

The widget access token associated with your DTN account.

locale

locale: enum ["en_US"];

The language to display the widget.

container

container: HTMLElement | string;

The container to mount the widget on. This can be a reference to an HTML element, or a valid selector string. If a string is encountered, document.querySelector will be used to search document for the container.

user

user: string;

User name in format: "firstName.lastName".

symbolConfig

symbolConfig: {symbol: string, isDescriptionVisible: boolean, isSymbolVisible: boolean};

The symbolConfig manages fetched data for the symbol and toggling show of the description and code.

Methods

getPriceHistoryForSymbol

getPriceHistoryForSymbol: (symbol: string, interval: string, duration: string) => void;

Fetch data according to passed parameters and redraw the chart with it. Interval code (D=Daily, W=Weekly, M=Monthly, Mi=Minutes, X-Mi=X Minute Intervals, where X represents a number of minutes. So 5-Mi represents 5 minute intervals. ). A duration with a number-periodCode combination. The number represents the quantity of the unit represented by the period code. This would be Mi=Minutes, D=Days, W=Weeks, M=Months. 15-D represents 15 days, 12-W represents 12 weeks, 120-Mi represents 120 minutes.

getQuoteForSymbol

getQuoteForSymbol: (symbol: string) => void;

Get quote data for the symbol.

changeChartType

changeChartType: (chartType: string) => void;

Change active chart type. The chartType property should be line, bar or candlesticks.

Callbacks

loadingStateDidChange

loadingStateDidChange: (loading: boolean) => void;

This callback will be called whenever the loading state changes. The callback takes a single argument which represents the new loading state.

chartDataDidChange

chartDataDidChange: (chartData: Array) => void;

This callback will be called whenever the chart should be redrawn with new data. The callback takes a single argument which represents the data that should be presented.

quoteDidChange

quoteDidChange: (quote: {symbol : Symbol; tradeDateTime: string; close: number; last: number; previous: number; low: number; high: number; cumVolume: number;}) => void;

This callback will be called whenever the quote is changed. The callback takes a single argument which represent the new quote data.

symbolPriceHistoryDidChange

symbolPriceHistoryDidChange: (symbolPriceHistory: {description: string; historicPrices: Array; marketName: string; priceInterval: string; symbol: string; tickerSymbol: string; vendor: string;}) => void;

This callback will be called whenever the history price for symbol is changed. The callback takes a single argument which represents the new history price data.

chartTypeDidChange

chartTypeDidChange: (chartType: string) => void;

This callback will be called whenever the chart type is changed. The callback takes a single argument which represent the new chart type.

onError

onError: (error: string) => void;

This callback will be called whenever the error state changed. The callback takes a single argument which represent the new error state.

Composable Widgets