Streaming in seconds with a range into the future

by sonylnagale

HTML

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>

JavaScript

window.stxx = new CIQ.ChartEngine({
  container: $$$(".chartContainer"),
  layout: {
    chartType: 'candle',
    periodicity: 1,
    interval: 'minute'
  },
});

// Needed in tick mode to let the chart know how often to display future labels.
// Set to a value that matches the interval in which new ticks come in (every second in this case),
// or set to 0 to prevent labels into the future from displaying.
window.stxx.chart.xAxis.futureTicksInterval = 1 / 60;

// force a label every second as space permits.
window.stxx.chart.xAxis.timeUnit = CIQ.SECOND;
window.stxx.chart.xAxis.timeUnitMultiplier = 1;

window.stxx.loadChart("TEST", [], function() {
  streamSimulation();
});


/***************** feed simulator code ********************************/
function streamSimulation() {
  var price = 151.731343;

  var change = Math.random() * (.12343 + .11234) - .123553; // random between +/-0.1 of current price
  price = price + parseFloat(change.toFixed(10));
  var volume = Math.floor(Math.random() * 10) + 1;
  window.stxx.updateChartData({Last:price,Volume:volume},null,{bypassGovernor:true});
  /* console.log(new Date().getTime(), price) */
  setTimeout(streamSimulation, 500);
}