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
|
- 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
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); };
CIQ.Renderer.MarketDepth.displayPrice=function(stx, context, style, price, spread){ return; };