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:100vw;height:100vh;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.displayVolumeHeatmap = function(stx, sd, quotes) {
  CIQ.Studies.displayHeatmap()
};

CIQ.Studies.calculateVolumeHeatmap = function(stx, 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++) {
    // default function https://documentation.chartiq.com/CIQ.Studies.html#.displaySeriesAsLine
    quotes[i]["Volume" + " " + sd.name] = quotes[i].IBM.Close;
  }
}
CIQ.Studies.studyLibrary = CIQ.extend(CIQ.Studies.studyLibrary, {
  "Sample": {
    name: "Sample",
    overlay: true,
    calculateFN: CIQ.Studies.calculateSample,
    yAxis: { "position": "left" },
    outputs: {
      line: "#FF00FF"
    }
  }
}); */

CIQ.Studies.studyLibrary.RendererTest = {
    name: " RendererTest",
/*     calculateFN: function(stx, sd) {
        var quotes = sd.chart.scrubbed;
        for (var i = 0; i < quotes.length; i++) {
            quotes[i]["Result " + sd.name] = {};
    
            ["High", "Low", "Open", "Close"].forEach(function(x) {
                if (i >= sd.days) quotes[i]["Result " + sd.name][x] = quotes[i - sd.days][x];
            });
    
            if (i > sd.days) {
                quotes[i]["Result " + sd.name].iqPrevClose = quotes[i - 1]["Result " + sd.name].Close;
            }
    
            quotes[i]["Signal " + sd.name] = quotes[i].Close;
        }
        sd.outputMap["Result " + sd.name] = "Result";
    }, */
    renderer: {
    	type: "heatmap",
      field: "Volume",
      binding: { color: "auto" },
      shareYAxis: false
    },
    outputs: { Volume: "auto", Up: "lime", Down: "red", panel: "chart"}
};

const stxx = new CIQ.ChartEngine({
 ...