JavaScript
import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/standard.js";
import "https://jsfiddle.chartiq.com/chart/plugins/activetrader/marketdepth.js";
// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);
//Create a CIQ.ChartEngine object, the main object for drawing charts.
const stxx = new CIQ.ChartEngine({
container: document.querySelector(".chartContainer")
});
// enable crosshairs
stxx.layout.crosshair = true;
// display the chart
stxx.setChartType("marketdepth_mountain_volume_step");
stxx.chart.xAxis.fitLeftToRight = true;
stxx.chart.tension = 0.5;
stxx.xaxisHeight = 25;
stxx.chart.panel.yAxis.initialMarginBottom = 0;
stxx.loadChart(
"Market Depth",
{
masterData:[]
},
function(){
// Comment this in to display a floating HUD at the crosshair location
// instead of floating labels at the axis.
// Also this crosshair HUD will include the display of a 3rd ‘custom’ field,
// if included in the L2 data array,
// commonly used to list the market for the information came from.
// "custom" field is an object and can include many elements.
// See sample data example.
CIQ.extend(stxx.mainSeriesRenderer.params, {headsUp:true});
}
);
// Sample data
const newData = {
DT: new Date("2018-07-30T04:00:00.000Z"),
Last: 125.48,
BidL2: [
[116.19, 4,{Source: "a"}],
[116.32, 1,{Source: "a"}],
[116.7, 2,{Source: "a"}],
[118.45, 4,{Source: "Something"}],
[119.21, 4,{Source: "AMEX"}],
[120.08, 10,{Source: "FX"}],
[120.46, 2,{Source: "NYSE",Session:"Morning"}],
[120.59, 10,{Source: "ex-1"}],
[120.71, 3,{Source: "w"}],
[120.84, 4,{Source: "n/a"}],
[120.96, 8,{Source: "c"}],
[121.21, 2],
[121.34, 21],
[121.72, 1],
[121.97, 5],
[122.09, 1],
[122.22, 38],
[122.34, 6],
[122.47, 45,{Source: "c"}],
[122.72, 6],
[122.84, 5],
[122.97, 5],
[123.1, 4],
[123.22, 61],
...