Stream data into a series

Sample of how to stream data to a series using updateChartData

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

JavaScript

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

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

import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js";

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

// customize your axis style
stxx.chart.yAxis.goldenRatioYAxis = true;
//stxx.chart.xAxis.axisType = "ntb";

//have main chart give space for the legend
stxx.chart.yAxis.initialMarginTop = 50;

//position legend
stxx.chart.legend = {
  x: 300,
  y: 20
};

stxx.loadChart("MASTER", sampleData);

// This is just dummy code for streaming quotes (randomly generated to update the last tick)
setInterval(function() {
  let newQuote = CIQ.clone(stxx.currentQuote());
  newQuote.Close = newQuote.SERIES.Close + Math.round((Math.random() - 0.5) * 100) / 100;
  newQuote.Volume = newQuote.SERIES.Volume + Math.round((Math.random() + 0.5) * 100) / 100;
  newQuote.DT = new Date(+newQuote.DT + CIQ.DAY)
  stxx.updateChartData(newQuote, null, {
    secondarySeries: "SERIES",
    useAsLastSale: true
  })
}, 2000);

function backfillSeriesData() {
  let newData = [];
  for (let i = 0; i < stxx.masterData.length; i++) {
    var newQuote = CIQ.clone(stxx.masterData[i]);
    newQuote.Close = newQuote.Close + Math.round((Math.random() - 0.5) * 100) / 100;
    newQuote.Volume = newQuote.Volume + Math.round((Math.random() + 0.5) * 100) / 100;
    newData.push(newQuote)
  }
  return newData
}

// add the series 
stxx.addSeries("SERIES", {
  color: "green",
  // Dummy code to generate data to backfill the series 
  data: backfillSeriesData(),
  marginTop: 100, // give room for the legend
});