Futures Chart Widget

Interactive chart widget displays futures market data.

Installation

script

Example

                              window.dtn.futures.createFuturesChartWidget({
 


                                
});

Types

Units

type Units = "Imperial" | "Metric";

These are the available metric systems that widget support.

FuturesSymbol

type FuturesSymbol = string;

This type describe futures symbol data that may be used to supply the symbol property.

ChartType

type ChartType = "LINE" | "BAR" | "CANDLESTICK";

This type describe chart types that may be used to supply the defaultChartType property.

ChartInterval

type ChartInterval = string;

This type describe chart interval data that may be used to supply the defaultChartInterval property.

ChartDuration

type ChartDuration = "SHORT" | "LONG";

This type describes chart duration data that may be used to supply the defaultChartDuration property.

PriceFormat

type PriceFormat = "DECIMAL" | "TICK";

This type describes the format of the prices that may be used to supply the priceFormat property.

Configuration

apiKey

apiKey: string;

The widget access api key associated with your DTN account.

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.

units

units?: Units = "Imperial";

The measuring units that are used for presenting numbers in the weather forecast.

symbol

symbol: FuturesSymbol;

The symbol used for drawing the chart.

priceFormat

priceFormat: PriceFormat = "TICK"

Determines the format of the prices when returned. Decimal will provide regular decimal values, Tick will provide fractional values as associated with the commodity root. Default set to "TICK".

showSymbol

showSymbol?: boolean = true;

Toggle symbol name showing. Default set to true.

showSymbolDescription

showSymbolDescription?: boolean = true;

Toggle symbol description showing. Default set to true.

defaultChartType

defaultChartType?: ChartType = "LINE";

The default chart type, used for initial chart drawing. Default set to "LINE".

defaultChartInterval

defaultChartInterval?: ChartInterval = "M";

The default chart interval used for chart drawing. Interval code is in format: 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. Default set to "M".

defaultChartDuration

defaultChartDuration?: ChartDuration = "SHORT";

The default chart duration used for chart drawing. Default set to "SHORT".

showContractSelect

showContractSelect?: boolean = false;

Whether the commodities and delivery period select drowndown to be shown. Default set to false.

Methods

setSymbol

setSymbol: (
  symbol: FuturesSymbol }
) => void;

Set the symbol of the chart and reload it.

setChartDisplay

setChartDisplay: (
  displayOptions: {type?: ChartType, interval?: ChartInterval } }
) => void;

Set the type and the default interval of the chart.

Callbacks

onChartDisplayChange

onChartDisplayChange: (
  newDisplayOptions: { type: ChartType, interval: ChartInterval, duration: ChartInterval } }
) => void;

This callback will be called whenever the cart type, interval or duration are changed.

onChartUpdate

onChartUpdate: (
  newSymbol: FuturesSymbol } }
) => void;

This callback will be called whenever the symbol of the chart is changed

Weather Widgets:

Markets Widgets:

Cash Bids Display Widgets:

News Widgets:

Premium Widgets: