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"; /********** emulator to simulate demo server-side data *******/ for (let i = 0; i < sampleData.length; i++) { sampleData[i]["field1"] = sampleData[i].Close; sampleData[i]["field2"] = sampleData[i].Volume; } /*************************************************************/ // Declare a CIQ.ChartEngine object. This is the main object for drawing charts. var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") }); // render a new chart with your data. stxx.loadChart("SPY", sampleData, function() { // add anything you want done in this callback // In this case we are adding a few studies using server side data. So no calculation functions are used // Define your studies. // You can define a calculate function but if the data is precalculated, // then you only need to set the series name and color. // This can be done directly when calling CIQ.Studies.addStudy, or by first adding an entry to CIQ.Studies.studyLibrary. // We provide both examples here. // Complete documentation is here: http://documentation.chartiq.com/tutorial-Custom%20Studies.html CIQ.Studies.studyLibrary["Plot High Low"] = { "seriesFN": CIQ.Studies.displaySeriesAsHistogram, inputs: { "HistogramType": "stacked" }, outputs: { "High": "blue", "Low": "red" } }; CIQ.Studies.studyLibrary["Plot Open Close"] = { outputs: { "Close": "blue", "Open": "purple" } }; // Add a study to see it on the screen. // They will display in the order that they are pushed onto the screen. // These ones have a study library already defined CIQ.Studies.addStudy(stxx, "Plot High Low"); CIQ.Studies.addStudy(stxx, "Plot Open Close"); // These ones are added all at once using the addStudy call. CIQ.Studies.addStudy(stxx, "Rollover", null, { "field1": "brown" }); CIQ.Studies.addStudy(stxx, "Cost of Carry", null, { "field2": "auto" }); });
<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>