Load a Drawing

Sample of how to load a drawing programmatically

by sonylnagale

HTML

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<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 quoteFeedSimulator from "https://jsfiddle.chartiq.com/chart/examples/feeds/quoteFeedSimulator.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

// start the chart engine
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});

// attach quoteFeed
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 0
});

// render a chart 
stxx.loadChart("AAPL", function() {

	stxx.importDrawings({
  	"name": "line",
    "pnl": "chart",
    "col": "auto",
    "fc": "#7DA6F5",
    "ptrn": "solid",
    "lw": 1,
    "d0": stxx.chart.dataSegment[stxx.chart.dataSegment.length - 10].Date,
    "d1": stxx.chart.dataSegment[stxx.chart.dataSegment.length - 5].Date,
    "tzo0": 1000,
    "tzo1": 1000,
    "v0": stxx.chart.yAxis.highValue-2,
    "v1": stxx.chart.yAxis.lowValue+2
  });
  

/* 
  stxx.importDrawings([{
    "name": "rectangle",
    "pnl": "chart",
    "col": "auto",
    "fc": "#7DA6F5",
    "ptrn": "solid",
    "lw": 1,
    "d0": stxx.chart.dataSegment[stxx.chart.dataSegment.length - 10].Date,
    "d1": stxx.chart.dataSegment[stxx.chart.dataSegment.length - 5].Date,
    "tzo0": 1000,
    "tzo1": 1000,
    "v0": stxx.chart.yAxis.highValue-2,
    "v1": stxx.chart.yAxis.lowValue+2
  }]); */
  stxx.draw();
});