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