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.

There are two ways to proportionally shade the rows with the size magnitude:

  1. Use attribute cq-size-shading which uses a linear-gradient (used in our sample).
  2. If that does not work on your required browsers, the second method is to include the <div col="shading"></div> cell within the template.

Working example:

Since:
  • 6.1.0

Examples

<!-- define your chart context -->
		<cq-context>
		<!-- define your UI manager component -->
		<cq-ui-manager></cq-ui-manager>
		<!-- This is your chart container. Position it anywhere, and in any way that you wish on your webpage. Make position style=relative -->
		<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 cq-size-shading>
					<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.