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.Chart#updateCurrentMarketData or CIQ.ChartEngine.Chart#updateChartData:

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

Requires cryptoIQ 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 style=relative -->
		<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 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.