Add Series to chart

Sample of how to add a series to a chart

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";

// 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";
import sample5Data from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_5MIN.js";


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

window.stxx = stxx;


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

//position legend
stxx.chart.legend = {
  x: 300,
  y: 20
};
console.log(sample5Data)
stxx.loadChart("SPY", sample5Data, function() {

  // add the series (as many as you need)

  /* // this one has data matching the range of the primary symbol 
  // and we are also appending new ticks to keep it in sync
  stxx.addSeries("Series-Name", {
    color: "green",
    data: getDataFromServer("someFieldIwantToAdd"),
    marginTop: 100, // give room for the legend
  });
  
  // this one only has partial data so it will only render a segment
  stxx.addSeries("GE", {
    color: "red",
    data: getDataFromServer("GE"),
    marginTop: 100, // give room for the legend
  });
  
  // this one only has partial data so it will only render a segment
  stxx.addSeries("IBM", {
    color: "blue",
    data: getDataFromServer("IBM"),
    marginTop: 100, // give room for the legend
  }); */
});

/*****************************************************************/
/* the following is only needed if you are not using a quotefeed */
/*****************************************************************/


// After a series is added , be sure to include the new ticks 
// in your masterData as you stream new data if you inted to keep the series in sync with your primary symbol.
// This is just dummy code for streaming quotes (randomly...