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

createXAxis(chart)

Generates a list of x-axis points to draw on the chart.

Parameters:

Name	Type	Description
`chart`	CIQ.ChartEngine.Chart	Chart object

Returns:

axisRepresentation that can be passed in to CIQ.ChartEngine.drawXAxis

Type: object | Array.<CIQ.ChartEngine.XAxisLabel>

determineMax(dataSegment)

Determine the maximum value to be drawn on the chart. Called by CIQ.ChartEngine.prototype.initializeChart

Parameters:

Name	Type	Description
`dataSegment`	Array.<object>	Not used

Returns:

Empty object if no current data, otherwise a tuple with 0, maximum of sum of bids or asks reduced by heightFactor

Type: object | Array.<number>

drawAxisLabels(point)

Draws the x-axis labels on the chart.

Parameters:

Name	Type	Description
`point`	CIQ.Renderer.MarketDepth~point	Information about the point on which the crosshair lies.

drawHeadsUp(point)

Draws the heads-up legend.

Parameters:

Name	Type	Description
`point`	CIQ.Renderer.MarketDepth~point	Information about the point on which the crosshair lies.

drawIndividualSeries(chart, parameters)

Draws the marketdepth onto the chart.

Parameters:

Name	Type	Description
`chart`	CIQ.ChartEngine.Chart	Chart object
`parameters`	object	Rendering parameters

Returns:

Result object

Type: object

<static> 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;
	};

<static> requestNew(featureList [, params])

Returns a new MarketDepth renderer if the featureList calls for it FeatureList should contain "marketdepth" Called by CIQ.Renderer.produce to create a renderer for the main series

Parameters:

Name	Type	Argument	Description
`featureList`	Array.<string>		List of rendering terms requested by the user, parsed from the chartType
`params`	object	<optional>	Parameters used for the series to be created, used to create the renderer

Since:

5.1.0

Returns:

A new instance of the MarketDepth renderer, if the featureList matches

Type: null | CIQ.Renderer.MarketDepth

Type Definitions

point

Object containing information about the point on which the crosshair lies

Properties:

Name	Type	Description
`x`	number	x-coordinate or crosshair
`y`	number	y-coordinate of crosshair
`price`	number \| string	Price of point intercepted by crosshair
`vol`	number \| string	Volume of point intercepted by crosshair
`custom`	Array.<string>	Free-form text