API Reference
Namespaces
Classes
Events
Global
Externals

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 <optional>

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


updateCrosshairs(x, y)

Draw crosshairs at the point nearest to the given coordinates

This will also draw any floating labels

Parameters:
Name Type Description
x *
y *

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