Order Book web component <cq-orderbook>
.
Displays a table of Level 2 Bid/Ask information from CIQ.ChartEngine.Chart#currentMarketData.
Requires Active Trader plugin. See CIQ.ChartEngine#updateCurrentMarketData for data requirements
Optional Attributes:
cq-close
: Adds a cq-close component to control visibility.cq-show-totals
: Displays Total Size and Total Amount columns. Omit this attribute for a more condensed book.
This component will take up 100% of its parent element.
There are two ways to proportionally shade the rows with the size magnitude:
- Use attribute
cq-size-shading
which uses a linear-gradient (used in our sample). - 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:
let stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
new CIQ.UI.Context(stxx, document.querySelector("cq-context,[cq-context]"));
stxx.updateCurrentMarketData(yourL2Data); // Call this every time you want refresh.