Server Side Study data

This is the jsfiddle implementation of helloworld.html including the initial rendering of a few studies using server side data.

by ChartIQ Library

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

// 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,...