Load the trade history web component

This jsfiddle shows how to load the trade history table book

by ChartIQ Library

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/plugins/activetrader/cryptoiq.css" />
<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/chartiq.css" />

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

JavaScript

import "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart/js/componentUI.js";
import "https://jsfiddle.chartiq.com/chart/js/components.js";
import "https://jsfiddle.chartiq.com/chart/plugins/activetrader/cryptoiq.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

// instantiate a chart engine
// this is needed to load and manage the L2 data 
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});

// configure settings. For example decimal places.
stxx.chart.panel.decimalPlaces = 4;

// initialize the UI context
new CIQ.UI.Context(stxx, document.querySelector("cq-context,[cq-context]"));

// setup the Trade data.
// These are the minimum required elements for trade history, 
// but this object can also include all of the other L2 data required
// for the order book and market depth charts)
const dataSet1 = {
  DT: new Date(),
  Last: 30.43,
  LastSize: 75,
  LastTime: new Date(),
}

const dataSet2 = {
  DT: new Date(),
  Last: 25.48,
  LastSize: 53,
  LastTime: new Date(),
}

const dataSet3 = {
  DT: new Date(),
  Last: 25.12,
  LastSize: 254,
  LastTime: new Date(),
}

const dataSet4 = {
  DT: new Date(),
  Last: 42.87,
  LastSize: 129,
  LastTime: new Date(),
}

// Call this line as often as you wish to refresh the data.
stxx.updateCurrentMarketData(dataSet1);

setTimeout(function() {
  console.log('Update data 2.')
  stxx.updateCurrentMarketData(dataSet2);
}, 2500);

setTimeout(function() {
  console.log('Update data 3.')
  stxx.updateCurrentMarketData(dataSet3);
}, 5000);

setTimeout(function() {
  console.log('Update data 4.')
  stxx.updateCurrentMarketData(dataSet4);
}, 7500);