long-short.js

document.body.innerHTML = "";
var script = document.createElement("script");
script.src =
  "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js";
document.body.appendChild(script);
document.body.style.background = "#fff";

var script = document.createElement("script");
script.src =
  "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css";
document.body.appendChild(script);

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href =
  "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css";
link.media = "all";
document.getElementsByTagName("head")[0].appendChild(link);

var charts = [
  {
    id: "Long",
    label: "BTC/USD Long",
    backgroundColor: "rgba(0, 255, 0, 0.2)",
    url:
      "https://api-pub.bitfinex.com/v2/stats1/pos.size:1m:tBTCUSD:long/hist?limit=120",
  },
  {
    id: "Short",
    label: "BTC/USD Short",
    backgroundColor: "rgba(255, 0, 0, 0.2)",
    url:
      "https://api-pub.bitfinex.com/v2/stats1/pos.size:1m:tBTCUSD:short/hist?limit=120",
  },
];

var parentDiv = document.createElement("div");
parentDiv.setAttribute("style", "height: 300px");
document.body.appendChild(parentDiv);

charts.forEach(({ id }) => {
  var div = document.createElement("canvas");
  div.setAttribute("id", id);
  div.height = "300px";
  parentDiv.appendChild(div);
});

var summaryPie = document.createElement("canvas");
summaryPie.setAttribute("id", "summaryPie");
summaryPie.height = "300px";
parentDiv.appendChild(summaryPie);

async function chart() {
  const promises = await Promise.all(charts.map(({ url }) => fetch(url)));
  const data = await Promise.all(promises.map((res) => res.json()));
  charts.forEach(({ id, label, backgroundColor }, index) => {
    if (!charts[index].chart) {
      // create
      charts[index].chart = new Chart(id, {
        type: "line",
        data: {
          datasets: [
            {
              label,
              backgroundColor,
              data: data[index].map(([t, y]) => ({ x: new Date(t), y })),
            },
          ],
        },
        options: {
          scales: {
            xAxes: [
              {
                type: "time",
              },
            ],
          },
        },
      });
    } else {
      // update
      charts[index].chart.data.datasets[0].data = data[index].map(([t, y]) => ({
        x: new Date(t),
        y,
      }));
      charts[index].chart.update();
    }
  });
  if (!charts.summaryPie) {
    // create
    charts.summaryPie = new Chart("summaryPie", {
      type: "pie",
      data: {
        datasets: [{
          data: data.map((d) => d[0][1]),
          backgroundColor: charts.map(({ backgroundColor }) => backgroundColor),
        }],
        labels: charts.map(({ label }) => label),
      },
    });
  } else {
      // update
      charts.summaryPie.data.datasets[0].data = data.map((d) => d[0][1])
      charts.summaryPie.update();
  }
}
chart();
setInterval(chart, 60000);