Load the order book web component

This jsfiddle shows how to load an order book

by ChartIQ Library

HTML

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

<cq-context>
  <cq-ui-manager></cq-ui-manager>
  <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>
			<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>

JavaScript

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 L2 data
const dataSet1 = {
  DT: new Date("2018-07-30T04:00:00.000Z"),
  Last: 125.48,
  BidL2: [
    [116.19, 4],
    [116.32, 1],
    [116.7, 2],
    [118.45, 4],
    [119.21, 4],
    [120.08, 10],
    [120.46, 2],
    [120.59, 10],
    [120.71, 3],
    [120.84, 4],
    [120.96, 8],
    [121.21, 2],
    [121.34, 21],
    [121.72, 1],
    [121.97, 5],
    [122.09, 1],
    [122.22, 38],
    [122.34, 6],
    [122.47, 45],
    [122.72, 6],
    [122.84, 5],
    [122.97, 5],
    [123.1, 4],
    [123.22, 61],
    [123.35, 10],
    [123.47, 8],
    [123.6, 59],
    [123.72, 2],
    [123.97, 8],
    [124.1, 3],
    [124.23, 90],
    [124.35, 4],
    [124.48, 97],
    [124.73, 13],
    [124.85, 122],
    [124.98, 4],
    [125.1, 13],
    [125.23, 204],
    [125.35, 25]
  ],

  AskL2: [
    [125.61, 6],
    [125.73, 223],
    [125.86, 37],
    [125.98, 13],
    [126.11, 187],
    [126.23, 8],
    [126.36, 5],
    [126.48, 11],
    [126.61, 137],
    [126.73, 12],
    [126.86, 122],
    [126.99, 10],
    [127.11, 3],
    [127.24, 6],
    [127.36, 10],
    [127.49, 1],
    [127.74, 1],
    [127.86, 91],
    [127.99, 7],
    [128.12, 1],
    [128.37, 5],
    [128.49, 8],
    [128.62, 3],
    [128.74, 7],
   ...