Trade Execution Visualization

This represents a common institutional use case of plotting a large limit order over time as it's broken down and executed in the market. This example shows the bid and ask (black and purple lines) plotted over time. The limit is plotted in green, and the yellow highlights are when the limit is greater than the ask. The green line on the left is when the order was entered. The red dotted line on the right is the current time. The executions are plotted as the green dot markers.

by ChartIQ Library

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>

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/chartiq.css" media="screen" />
<style>
  .stx-stem {
    height: 0;
  }

  .stx-marker.circle .stx-visual {
    width: 5px;
    height: 5px;
  }

  .stx-marker.circle .stx-visual:hover {
    width: 25px;
    height: 25px;
  }

</style>

JavaScript

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

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

// Override default quotefeed with modifications for data to plot
quoteFeedSimulator.cleaned = false;

// Removes data from before the start date
quoteFeedSimulator.clean = function() {
  // Clean after start date is defined, but only once.
  if (startDate && !this.cleaned) {
    // Set to true so this only gets called one.
    this.cleaned = true;

    // Remove limit data before start date

    // Start from the end of master data and work back until data is before startDate
    for (var i = stxx.masterData.length - 1; i >= 0; --i) {
      var data = stxx.masterData[i];
      if (data.DT >= startDate) {
        // There should be a limit after the start date, no modification necessary
        continue;
      } else if (!data.Limit) {
        // Reached the point where there are no more limits, done cleaning.
        break;
      } else {
        // There shouldn't be a limit before the start date.
        data.Limit = undefined;
      }
    }
  }
};

// Override formatChartData to add limit
quoteFeedSimulator.formatChartData = function(response) {
  var feeddata = JSON.parse(response);
  var newQuotes = [];
  var mod = 50; // How many points between steps
  var limit; // The limit value
  for (var i = 0; i < feeddata.length; i++) {
    if (i % mod === 0) {
      // Change limit value
      limit = feeddata[i].Open * (0.9 + 0.3 * Math.random());

      // Changes points between steps
      mod = 20 + Math.round(Math.random() * 30);
    }

    newQuotes[i] = {};
    newQuotes[i].DT = new Date(feeddata[i].DT); // DT is a string in ISO format, make it a Date instance
    newQuotes[i].Open = feeddata[i].Open;
    newQuotes[i].High = feeddata[i].High;
    newQuotes[i].Low...