Legacy ChartIQ SDK Documentation

Class: MarketDepth

CIQ .Renderer. MarketDepth

new MarketDepth(config)

Creates a market depth renderer.

See CIQ.Renderer#construct for parameters required by all renderers

This renderer has three unique config options: step, mountain, and volume, all of which are independent of each other.

step If set, will draw the connections between the data points as steps rather than curved lines.
mountain If set, will shade in the area under the plots rather than just drawing the line.
volume If set, will draw a histogram at each data point for which there is volume.

This renderer does not allow panning interaction with the chart.

Requires Active Trader plugin. See CIQ.ChartEngine#updateCurrentMarketData for data requirements

See CIQ.ChartEngine#drawMarketDepth for color parameters and usage examples.

Here is sample JSFiddle illustrating how to render a stand-alone Market Depth chart:

Parameters:

Name Type Description

config

object

Config for renderer

Properties

Name Type Argument Description

params

object

Parameters to control the renderer itself

Properties

Name	Type	Argument	Description
`type`	string	<optional>	Type of rendering "marketdepth"
`step`	boolean	<optional>	If 'true' the bid and ask lines will not be curved but rather take the same of a step chart.
`mountain`	boolean	<optional>	If 'true', bid and ask curve lines will be shaded resembling mountain charts.
`volume`	boolean	<optional>	If 'true', volume bars will be drawn.
`headsUp`	boolean	<optional>	If 'true' crosshair information will be displayed in a box next to the crosshair rather than on axes.

Version:

ChartIQ Active Trader Package

Since:

6.1.0
6.3.0 Added headsUp parameter.

Methods

displayPrice(stx, context, style, price, spread)

Displays the current price and the spread on the top center section of the chart.

This function may be overridden to customize the price display. To suppress the display simply override this function to do noting but return.

Note: Only called if 'Last' price is included on data object.

Parameters:

Name	Type	Description
`stx`	CIQ.ChartEngine	Chart engine object
`context`	external:CanvasRenderingContext2D	HTML5 canvas context
`style`	object	css style to display price (font and lineHeight)
`price`	string	last price
`spread`	string	bid-ask distance

Version:

ChartIQ Active Trader Package

Since:

6.3.0

Examples

This is the default function

CIQ.Renderer.MarketDepth.displayPrice = function (stx, context, style, price, spread) {
	var width = stx.chart.width;
	context.textAlign = "center";
	context.fillStyle = style.color;
	context.save();
	context.font =
		style.fontStyle +
		" " +
		style.fontVariant +
		" " +
		style.fontWeight +
		" " +
		style.fontSize +
		"/" +
		style.lineHeight +
		" " +
		style.fontFamily.replace(/"/g, "");
	context.fillText(price, width / 2, 30);
	context.restore();
	if (spread.length) context.fillText(stx.translateIf("Spread") + ": " + spread, width / 2, 60);
};

This example disables the display of the price box

CIQ.Renderer.MarketDepth.displayPrice = function (stx, context, style, price, spread) {
	return;
};