API Reference
Namespaces
Classes
Events
Global
Externals

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

  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:
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.