Advanced Heatmap

This jsfiddle shows how to load an Advanced Heatmap using an API injection

by sonylnagale

HTML

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

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

JavaScript

import {
  CIQ
} from "https://jsfiddle.chartiq.com/chart/js/advanced.js";

// Declare a CIQ.ChartEngine object.
// This is the main object for drawing charts.
// Here is where you set all required defaults.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "chartType": "candle",
    "crosshair": true,
    "candleWidth": 30,
    "periodicity": 1,
    "interval": 'second',
    "l2heatmap": true
  },
  preferences: {
    "currentPriceLine": true,
    "whitespace": 100
  },
  chart: {
    yAxis: {
      position: 'left'
    }
  }
});


// Setup the chart data including heat map data.
const newData = [{
  "DT": "2019-09-05T20:33:29.000Z",
  "Date": "20190905163329000",
  "Open": 102.57836546008207,
  "Close": 102.45249999999999,
  "High": 102.94,
  "Low": 102.07,
  "Volume": 3804,
  "Bid": 102.05,
  "BidSize": 21,
  "Ask": 102.25,
  "AskSize": 6,
  "LastSize": 90,
  "BidHeatmap": [
    [95, 6, 0.009095502779181405],
    [97, 3, 0.004547751389590703],
    [101, 4, 0.00606366851945427],
    [102, 21, 0.03183425972713492],
    [94.6, 1, 0.0015159171298635675],
    [94.7, 4, 0.00606366851945427],
    [96.4, 4, 0.00606366851945427],
    [97.7, 1, 0.0015159171298635675],
    [97.8, 16, 0.02425467407781708],
    [98.1, 5, 0.007579585649317837],
    [98.2, 10, 0.015159171298635674],
    [98.3, 3, 0.004547751389590703],
    [98.5, 5, 0.007579585649317837],
    [98.6, 5, 0.007579585649317837],
    [98.8, 21, 0.03183425972713492],
    [99.5, 32, 0.04850934815563416],
    [99.6, 10, 0.015159171298635674],
    [99.7, 45, 0.06821627084386053],
    [99.9, 9, 0.013643254168772108],
    [100.2, 4, 0.00606366851945427],
    [100.3, 62, 0.09398686205154118],
    [100.4, 8, 0.01212733703890854],
    [100.5, 8, 0.01212733703890854],
    [100.6, 56, 0.08489135927235977],
    [100.7, 5, 0.007579585649317837],
    [100.9, 4, 0.00606366851945427],
    [101.1, 90, 0.13643254168772107],
    [101.2, 4, 0.00606366851945427],
    [101.3,...