CrossPlot

Plot multiple variables using CIQ.CrossSection.

by sonylnagale

HTML

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />

<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/css/chartiq.css" media="screen" />


<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

JavaScript

// Reference the main ChartIQ library.
import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/standard.js";

// Reference the CrossPlot plug-in.
import "https://jsfiddle.chartiq.com/chart/plugins/crosssection/core.js";

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

const datapoints = {};
const portfolio = {};

fetch("https://226iqum3mapdpz4c6exfufrelq0amseb.lambda-url.us-east-1.on.aws/?path=IndexSurface&limit=3")
	.then(data => data.json())
  .then(json => {
  	json[0].indexPoints.forEach((point,i) => {
      datapoints[i] = {
        "name": point.relativeStrike, // x axis
        "portfolio": point.tenor,
        "expiration": point.expirationDate,
        "score": point.volatility, // y axis
        "strikePrice": point.strikePrice
      };
       portfolio[point.tenor] = {
       	color: `#${Math.floor(Math.random()*16777215).toString(16)}`
       }
    });
    
    const data = [
      {
				DT: json[0].asOf,
        /* DT: new Date().toISOString(), */
        DataSet: datapoints
      }
    ];
    
    console.log(data)
    stxx.loadChart("crossplot", { masterData: data });
  });



// Create a static data source for the chart.
var quotes = [
  {
    "DT": "2022-12-08T05:00:00.000Z",
    "DataSet": {
      "Strike": {
        "name": "Strike", // x axis
        "portfolio": "A",
        "touchpoints": 32,
        "score": 10000, // y axis
        "tcv": 2136
      },
      "Client 2": {
        "name": "Led Zeppelin Holdings",
        "portfolio": "A",
        "touchpoints": 69,
        "score": 5.27148,
        "tcv": 200
      },
      "Client 3": {
        "name": "Queen Wholesale",
        "portfolio": "B",
        "touchpoints": 94,
        "score": 8.14696,
        "tcv": 4543
      },
      "Client 4": {
        "name": "Pink Floyd Trading",
        "portfolio": "B",
        "touchpoints": 172,
        "score": 8.01689,
        "tcv": 2618
      },
      "Client 5": {
     ...