3.8.2Embedding a trading chart in an iframe, inside a widget

A widget can embed a trading chart inside its page. For example, the widget's HTML contains an iframe:

<body>

</body>

The widget can then load a chart into the iframe as follows, using Framework.CreateSubWidget():

Framework.CreateSubWidget({

domTarget: "ChartContainer", // Either the HTML element, or its id attribute

type: "chart",

context: {instrumentId: "GBP/USD", timeframe: 3600},

settings: { … }

});

CreateSubWidget() fires an optional callback, providing a widgetId which can subsequently be used to interact with the chart using ChartChange(). For example:

Framework.CreateSubWidget({

domTarget: "ChartContainer", // Either the HTML element, or its id attribute

type: "chart",

context: {instrumentId: "GBP/USD", timeframe: 3600},

settings: { … }

}, function (MsgResponse) {

// MsgResponse.widgetId contains the ID which can be used in

// calls to ChartChange(). For example, use ChartChange() to add

// 20-bar EMA to the chart:

Framework.ChartChange({

mode: "single",

chartId: MsgResponse.widgetId,

command: "load-indicator",

indicator: "EMA",

indicatorSettings: {period: 20}

});