SampleStudy with Histogram and Line

This is the jsfiddle implementation of helloworld.html

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:100%;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_5MIN.js";

// Declare a CIQ.ChartEngine object.
// This is the main object for drawing charts.
// Here is where you set all required defaults.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "chartType": "candle",
    "crosshair": true,
    "candleWidth": 30,
    "periodicity": 1,
    "interval": 'minute',
  },
  preferences: {
    "currentPriceLine": true,
    labels: true
   },
 chart: {
    yAxis: {
      drawPriceLabels: false
    }
  }
});

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

  const histogram = name + "_hist";
  for (let i = 0; i < quotes.length; i++) {
    let quote = quotes[i];
    quote[histogram] = quote.Close + Math.random() * 25;
    quote["Signal " + name] = quote.High - Math.random() * 25;
  }
  sd.outputMap[histogram] = "";
};

CIQ.Studies.studyLibrary = CIQ.extend(CIQ.Studies.studyLibrary, {
		study_sample: {
			name: "study_sample",
			calculateFN: CIQ.Studies.calculateSample,
			seriesFN: CIQ.Studies.displayHistogramWithSeries,
			inputs: {},
			outputs: {
				Signal: "#FF0000",
				"Increasing Bar": "#00DD00",
				"Decreasing Bar": "#FF0000"
			}
		}
	});

//Now load a chart with it's data
stxx.loadChart(
  "SPY", sampleData,
  () => {
  CIQ.Studies.addStudy(stxx, "study_sample")
  /* CIQ.Studies.addStudy(stxx, "study_sample", null, null, null, "New panel") */
  }
);