Class: MarketDepth

CIQ. MarketDepth


new MarketDepth(params)

Plugin that puts a market depth plot as well as an order book under the chart. It shows the volumes of bids and asks .

See CIQ.ChartEngine#updateCurrentMarketData for data requirements

To enable this plugin in sample-template-advanced.html , search for cryptoiq and uncomment the necessary sections. This template can also be used as reference to create your own UI for this module.

Once instantiated, use the display(true/false) function to add it or remove it from the chart. See example.

If using ChartIQ webComponents, it needs to be created before the UI manager (startUI) is called for custom themes to apply.

For details on how to render a stand alone Market Depth chart see CIQ.ChartEngine#drawMarketDepth

Plugin Visual Reference:
img-marketDepth-plugin

Parameters:
Name Type Argument Default Description
params object

Configuration parameters

Properties
Name Type Argument Description
stx CIQ.ChartEngine <optional>

The chart object

parameters.volume boolean <optional>

Set to true to include volume bars on the chart

parameters.mountain boolean <optional>

Set to true to allow shading of the chart

parameters.tension number <optional>
null

Splining tension for smooth curves around data points (range 0-1). Must include splines.js for this to be effective.

params.height string <optional>
150px

Height of market depth panel

params.yAxis object <optional>

optional yAxis parameters

params.precedingContainer object <optional>

Set to the htmlElement after which to insert the market depth chart. Defaults to last chart container's parent.

parameters.orderbook object <optional>

Set to the htmlElement which is the orderbook container, to make the orderbook appear within the marketdepth area. For example, $$$("cq-orderbook") To use the default orderbook in orderbook.html, set this parameter to true.

parameters.record boolean <optional>

Set to true to record the marketDepth data. Updating currentMarketData will then also update masterData. This is useful when rendering historical market depth. Note this may be memory-intensive. The marketDepth plugin's "recording" property will be set to this value. This can be turned on or off on the fly by calling stxx.marketDepth.setRecorder(true|false)

params.heatmapSize boolean <optional>

Set to show size of each block in L2 heat map, provided blocks are tall enough to contain text.

params.headsUp boolean <optional>

Set to show crosshair data in a box next to the crosshair instead of on the axis. Using this option allows the display of the custom fields within the BidL2 and AskL2 arrays from the dataSet.

Since:
  • 6.1.0
    • 6.2.0 added record parameter
    • 6.3.0 added heatmapSize, headsUp parameters
Example
// instantiate a Market Depth plot with default params
	new CIQ.MarketDepth({stx:stxx});

 // display the marketDepth
	stxx.marketDepth.display(true);
	// OR:
	stxx.layout.marketDepth=true;
	stxx.changeOccurred("layout");

 // hide the marketDepth
	stxx.marketDepth.display(false);
	// OR:
	stxx.layout.marketDepth=false;
	stxx.changeOccurred("layout");