Edit in JSFiddle

/********** emulator to simulate demo server-side data *******/
for (var i = 0; i < sampleData.length; i++) {
  sampleData[i]["field1"] = sampleData[i].Close;
  sampleData[i]["field2"] = sampleData[i].Volume;

// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.
var stxx = new CIQ.ChartEngine({
  container: $$$(".chartContainer")
// render a new chart with your data.
stxx.loadChart("SPY", sampleData, function() {
  // add anything you want done in this callback

  // In this case we are adding a few studies using server side data. So no calculation functions are used

  // Define your studies. 
  // You can define a calculate function but if the data is precalculated,
  // then you only need to set the series name and color.
  // This can be done directly when calling CIQ.Studies.addStudy, or by first adding an entry to CIQ.Studies.studyLibrary.
  // We provide both examples here.
  // Complete documentation is here: http://documentation.chartiq.com/tutorial-Custom%20Studies.html

  CIQ.Studies.studyLibrary["Plot High Low"] = {
    "seriesFN": CIQ.Studies.displaySeriesAsHistogram,
    inputs: {
      "HistogramType": "stacked"
    outputs: {
      "High": "blue",
      "Low": "red"

  CIQ.Studies.studyLibrary["Plot Open Close"] = {
    outputs: {
      "Close": "blue",
      "Open": "purple"

  // Add a study to see it on the screen. 
  // They will display in the order that they are pushed onto the screen.

  // These ones have a study library already defined
  CIQ.Studies.addStudy(stxx, "Plot High Low");
  CIQ.Studies.addStudy(stxx, "Plot Open Close");
  // These ones are added all at once using the addStudy call.
  CIQ.Studies.addStudy(stxx, "Rollover", null, {
    "field1": "brown"
  CIQ.Studies.addStudy(stxx, "Cost of Carry", null, {
    "field2": "auto"
<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

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