Helloworld with custom study

Sample of how to create a custom study calculation using the default line rendering function.

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

CIQ.Studies.calculateSample = function(stx, sd) {
console.log(sd)
  const quotes = sd.chart.scrubbed;

  if (quotes.length < sd.days + 1) {
    // not enough data
    sd.error = true;
    return;
  }

  // iterate trough the raw data and create the required values for the display function to use
  for (let i = sd.startFrom; i < quotes.length; i++) {
    if (!quotes[i]) continue;
    if (!quotes[i].Close) continue;

    // make sure field name complies with 
    // default function https://documentation.chartiq.com/CIQ.Studies.html#.displaySeriesAsLine
    quotes[i]['line1 ' + sd.name] = quotes[i].Close + 1;
    }
};



CIQ.Studies.studyLibrary = CIQ.extend(CIQ.Studies.studyLibrary, {
  "Sample": {
    name: "Sample",
    overlay: true,
    // note no display function is set, 
    // so the default (https://documentation.chartiq.com/CIQ.Studies.html#.displaySeriesAsLine) 
    // will be used to draw simple lines.
    calculateFN: CIQ.Studies.calculateSample,
    inputs: {
      Period: 14
    },
   outputs: {
      line1: "#FF0000",
      line2: /* "#FF7F00",
      line3: "#FFFF00",
      line4: "#7FFF00",
      line5: "#00FF7F",
      line6: "#00FFFF",
      line7: "#007FFF",
      line8: "#0000FF",
      line9: "#7F00FF",
      line10: */ "#FF00FF"
    }
  }
});


const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});

stxx.loadChart("SPY", sampleData, function() {

  CIQ.Studies.addStudy(stxx, "Sample");

});