Add Series to chart

Sample of how to add a series to a chart

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>

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

JavaScript

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

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

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

stxx.loadChart("SPY", sampleData, 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("APPL", {
    color: "red",
    data: getDataFromServer("APPL"),
    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 generated to update the last tick)
setInterval(function() {
  var newQuote = CIQ.clone(stxx.currentQuote());
  newQuote["Close"] = newQuote["Close"] + Math.round((Math.random() - .5) * 100) / 100;
  newQuote["Series-Name"] = newQuote["Series-Name"] + Math.round((Math.random() - .5) * 100) / 100;
  stxx.appendMasterData([newQuote]);
}, 2000);

// This is just dummy code for adding a series. In real life you'll want to get the actual
// data for the stock...