Namespace: cq-tradehistory

WebComponents. cq-tradehistory

Trade History web component <cq-tradehistory>.

Displays a table of trade information from CIQ.ChartEngine.Chart#currentMarketData.

The following data should exist in the data record sent to either CIQ.ChartEngine#updateCurrentMarketData or CIQ.ChartEngine#updateChartData:

  • Last or Close
  • LastSize
  • LastTime (this will default to DT if omitted)

Requires Active Trader 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.

Visual Reference:
img-tradehistory

Since:
  • 6.2.0

Examples

<!--
This is your chart container. Position it anywhere, and in any way that you wish on your webpage.
Make position relative for the chart container div element.
-->
<cq-context>
<cq-ui-manager></cq-ui-manager>
<div class="chartContainer" style="width:800px;height:460px;position:relative;">
    <cq-tradehistory cq-active>
        <cq-tradehistory-table>
            <cq-scroll cq-no-claim>
                <cq-tradehistory-body maxrows=500></cq-tradehistory-body>
            </cq-scroll>
        </cq-tradehistory-table>
        <template>
            <cq-item>
                <div col="qty">Qty</div>
                <div col="price">Price</div>
                <div col="amount">Amount</div>
            </cq-item>
        </template>
    </cq-tradehistory>
</div>
</cq-context>
// Once the component is added to the HTML, it can be activated, and data can be loaded as follows:
var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
new CIQ.UI.Context(stxx, $("cq-context,[cq-context]"));
stxx.updateCurrentMarketData(yourL2Data); // Call this every time you want a refresh.