Combination Yield Curve - Time Series

Illustrate how to have multiple chart types in the same page.

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

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/plugins/crosssection/crosssection.css" media="screen" />

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/plugins/crosssection/sample.css" media="screen" />

<div class="chartContainer" style="width:100%;height:200px;position:relative;"></div>
<div class="chartContainer2" style="width:100%;height:200px;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_DAILY.js";
import "https://jsfiddle.chartiq.com/chart/plugins/crosssection/core.js";
import quoteFeedSimulator from "https://jsfiddle.chartiq.com/chart/examples/feeds/termstructureDataSimulator.js";

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


/************************************************/
/********** Term Structure Chart ****************/
/************************************************/

// Declare a CIQ.ChartEngine object.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});

// Connect the chart to the feed
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 0
});


// define sort function. 
function sortFunction(l, r) {
    let weight = ["DY", "WK", "MO", "YR", "ST", "MT", "LT"];
    let l1 = l.split(" "),
      r1 = r.split(" ");
    let diff =
      weight.indexOf(l1[l1.length - 1]) - weight.indexOf(r1[r1.length - 1]);
    if (diff) return diff > 0 ? 1 : -1;

    if (isNaN(l1[0])) return 1;
    if (isNaN(r1[0])) return -1;
    if (Number(l1[0]) < Number(r1[0])) return -1;
    if (Number(r1[0]) < Number(l1[0])) return 1;
    return 0;
}

// load the Term structure plugin into the engine
new CIQ.CrossSection({
  stx: stxx,
  drawShading: true,
  pointFreshnessTimeout: 5, 
  sortFunction
});

// Initialize the Term structure chart
stxx.setChartType("termstructure");

//Now load a chart with it's data
stxx.loadChart("US-T BENCHMARK", {}, function(){
	// add a new entity to compare
	this.crossSection.addCurve("/FV", new Date("Sun May 03 2020 12:34:04 GMT-0400 (Eastern Daylight Time)"), {color: "rgb(255, 83, 73)"});
  // add historical comparison for same entity
	this.crossSection.addCurve("US-T BENCHMARK", new Date("Sun May 03 2020 12:34:04 GMT-0400 (Eastern Daylight Time)"),...