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


/********* bug fix **********/
CIQ.Studies.displayIndividualSeriesAsLine = function(
  stx,
  sd,
  panel,
  name,
  quotes
) {
  if (!panel.height) panel.height = panel.bottom - panel.top;

  var context = sd.getContext(stx);
  var output = sd.outputs[sd.outputMap[name]];
  if (!output) return;

  // save the original context settings
  context.save();

  // backwards compatibility if the output is just a color string
  if (typeof output === "string") {
    output = {
      color: output,
      width: 1
    };
  }

  context.lineWidth = output.width || 1;

  var color = output.color;
  if (color == "auto") color = stx.defaultColor; // This is calculated and set by the kernel before draw operation.
  context.strokeStyle = color;

  var pattern = CIQ.borderPatternToArray(context.lineWidth, output.pattern);

  //context.setLineDash(CIQ.borderPatternToArray(context.lineWidth, pattern));
  //context.lineDashOffset = 0;

  var labelDecimalPlaces = 0;
  var study = sd.study,
    yAxis = sd.getYAxis(stx);
  labelDecimalPlaces = stx.decimalPlacesFromPriceTick(yAxis.priceTick);
  if (sd.overlay || sd.underlay) labelDecimalPlaces = null; // will end up using the same as the chart itself
  if (yAxis.decimalPlaces || yAxis.decimalPlaces === 0)
    labelDecimalPlaces = yAxis.decimalPlaces;
  var label = null;
  if (sd.parameters) label = sd.parameters.label;
  var libParams = study.parameters;
  if (!libParams) libParams = {};
  var step = libParams.plotType == "step" || sd.plotStepLine;
  if (sd.series) {
    // not even sure why this is here but leaving for "backward compatibility"
    for (var s in sd.series) {
      var ser = sd.series[s].parameters.type;
      if (ser) step = ser == "step";
    }
  }
  // backwards compatibility
  if (libParams.noLabels) label = false;
  if (!sd.noSlopes && sd.noSlopes...