Custom QuoteFeed with asynchronous streaming

This fiddle demonstrates how to implement a custom QuoteFeed with pagination support, combined with an asynchronous streaming method.

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:600px;height:400px;position:relative;"></div>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart/js/addOns.js";
import quoteFeed 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);

// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.
var stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});


/* stxx.append("initializeDisplay", function () {
  var dataSize = this.chart.dataSet;
  this.chart.yAxis.lowValue = dataSize[dataSize.length - 1].Close - 50; // set to the lower bound
  this.chart.yAxis.highValue = dataSize[dataSize.length - 1].Close + 50; // set to the higher bound
 }); */

new CIQ.Animation({stx: stxx, animationParameters: {tension:0.3}});  //Default animation with splining tension of 0.3
/* 
const changeAxis = function() {
  this.chart.yAxis.lowValue = 50 //this.chart.dataSegment[this.chart.dataSegment.length - 1].Close + 100; // set to the lower bound
  this.chart.yAxis.highValue = 100 //this.chart.dataSegment[this.chart.dataSegment.length - 1].Close - 100; // set to the higher bound
}; */

/* CIQ.ChartEngine.prototype.append("draw", changeAxis); */

stxx.attachQuoteFeed(quoteFeed, { refreshInterval: 1});
// run the chart for the symbol of your choice and start streaming.
stxx.setPeriodicity({ period: 1, timeUnit: "tick" });
stxx.setChartType("line")
stxx.loadChart("USDAUD");


/******************* Trade simulation for demo purposes only ************************/
/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
// The following function is just a simulation (using randomly generated data) to 
// illustrate how to...