Namespace: cq-orderbook

WebComponents. cq-orderbook

Order Book web component <cq-orderbook>.

Displays a table of Level 2 Bid/Ask information from CIQ.ChartEngine.Chart#currentMarketData.

Requires cryptoIQ plugin. See CIQ.ChartEngine#updateCurrentMarketData for data requirements

This component will take up 100% of its parent element.

Use component's open() and close() methods to show and hide.

There are two ways to proportionally shade the rows with the size magnitude. One is with the attribute cq-size-shading which uses a linear-gradient. If your browser does not like that or render that properly the second method is to include the <div col="shading"></div> cell within the template. according to the bid/ask size of the row.

Visual Reference:
img-orderBook

Since:
  • 6.1.0

Examples

<!-- This is your chart container. Position it anywhere, and in any way that you wish on your webpage. Make position style=relative -->
		<cq-context>
		<cq-ui-manager></cq-ui-manager>
		<div class="chartContainer" style="width:800px;height:460px;position:relative;">
			<cq-orderbook cq-active>
			<cq-orderbook-table reverse>
				<cq-scroll>
					<cq-orderbook-bids></cq-orderbook-bids>
				</cq-scroll>
			</cq-orderbook-table>
			<cq-orderbook-table>
				<cq-scroll>
					<cq-orderbook-asks></cq-orderbook-asks>
				</cq-scroll>
			</cq-orderbook-table>
			<template>
				<cq-item>
					<div col="price">Price</div>
					<div col="size">Size</div>
					<div col="cum_size">Total Size</div>
					<div col="amount">Amount</div>
					<div col="cum_amount">Total Amount</div>
					<div col="shading"></div>
				</cq-item>
			</template>
			</cq-orderbook>
		</div>
		</cq-context>
// once the component is added to the HTML it can be activated and data loaded as follows:
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer")}); 
new CIQ.UI.Context(stxx, $("cq-context,[cq-context]"));
stxx.updateCurrentMarketData(yourL2Data); // call this every time you want refresh.