Basic Yield Curve with comparisons

This is the jsfiddle implementation of helloworld.html displaying an Yield Curve with comparisons

by ChartIQ Library

HTML

<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:400px;position:relative;"></div>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.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);

// the code in this script is ony needed when running within a jsfiddle
const lss = CIQ.loadStylesheet;
/*CIQ.loadStylesheet = function(url, cb) {
  return lss("https://jsfiddle.chartiq.com/chart8.0/" + url, cb);
}
const lsc = CIQ.loadScript;
CIQ.loadScript = function(url, cb) {
  return lsc("https://jsfiddle.chartiq.com/chart8.0/" + url, cb);
}*/

/************************************************/
/********** 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: 5
});

// 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
  //useQuotefeed: false,
  //showUpdateStamp: true,
});

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

/**** sample data object ***
var quotes = [{
  DT: new Date(),
  Date: new Date().toISOString(),
 ...