import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js"; // Activate the License Key import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js"; getLicenseKey(CIQ); import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js"; const stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") }); // Declare a CIQ.ChartEngine object. This is the main object for drawing charts. stxx.loadChart("SPY", sampleData, function() { // add anything you want done in the callback // in this case we are adding a moving average study const inputs = { "Period": 50, "Field": "Close", "Type": "ma" }; const outputs = { "MA": "red" }; CIQ.Studies.addStudy(stxx, "ma", inputs, outputs); // and a volume underlay CIQ.Studies.addStudy( stxx, "vol undr", {}, { "Up Volume": "blue", "Down Volume": "yellow", "Up Border": "red", "Down Border": "green", } ); });
<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>