Fear Index vs. BTC price vs. ETH price (API data)

fear-index-vs-btc-price-vs-eth-price-api-data.markdown

Fear Index vs. BTC price vs. ETH price (API data)

A Pen by Alex on CodePen.

License.

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="./script.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="lds-ripple">
  <div></div>
  <div></div>
</div>

<div id="group">
  <figure class="highcharts-figure">
    <div id="container" hidden></div>
    <p class="highcharts-description">
    </p>
  </figure>

  <div style="text-align: center;">
    <button id="linlog" class="pure-button" hidden>
      <i class="fa fa-cog"></i> Switch Linear/Logarithmic
    </button>
  </div>
</div>

script.js

$(document).ready(function () {
  // Auto-reloads every 30mins
  setTimeout(function () {
    window.location.reload(1);
  }, 1800000);

  // Fetches Fear
  fetchHistorical().then((greed) => {
    greed = greed.data;
    const greed_values = Object.keys(greed).map((key) =>
      parseInt(greed[key].value)
    );

    // Fetches BTC
    fetchHistoricalBTC().then((btc) => {
      const btc_date = Object.keys(btc).map((key) =>
        moment(epochToJsDate(btc[key].time)).format("DD-MM-YYYY")
      );
      const btc_close = Object.keys(btc).map((key) => btc[key].close);

      function epochToJsDate(ts) {
        return new Date(ts * 1000);
      }

      // Fetches ETH
      fetchHistoricalETH().then((eth) => {
        const eth_close = Object.keys(eth).map((key) => eth[key].close);

        // Removes data first years
        btc_date.splice(0, 2759);
        btc_close.splice(0, 2759);
        eth_close.splice(0, 2759);

        // Reverses data order
        btc_date.reverse();
        btc_close.reverse();
        eth_close.reverse();

        // Loads chart
        const chart = Highcharts.chart("container", {
          chart: {
            zoomType: "x"
          },
          title: {
            text: "BTC/ETH Price VS. Fear Index"
          },
          subtitle: {
            text:
              "(0-24 Extreme Fear | 25-49 Fear | 50-74 Greed | 75-100 Extreme Greed)"
          },
          xAxis: [
            {
              categories: btc_date,
              crosshair: true,
              reversed: true,
              type: "datetime"
            }
          ],
          yAxis: [
            {
              // Primary yAxis
              labels: {
                format: "${value}",
                style: {
                  color: Highcharts.getOptions().colors[1]
                }
              },
              title: {
                text: "Price",
                style: {
                  color: Highcharts.getOptions().colors[1]
                }
              },
              opposite: true
            },
            {
              // Secondary yAxis
              title: {
                text: "Fear Index",
                style: {
                  color: Highcharts.getOptions().colors[0]
                }
              },
              labels: {
                format: "{value}",
                style: {
                  color: Highcharts.getOptions().colors[0]
                }
              }
            }
          ],
          tooltip: {
            shared: true
          },
          legend: {
            layout: "vertical",
            align: "left",
            verticalAlign: "top",
            floating: true,
            backgroundColor:
              Highcharts.defaultOptions.legend.backgroundColor || // theme
              "rgba(255,255,255,0.25)"
          },
          series: [
            {
              name: "Greed",
              type: "area",
              yAxis: 1,
              data: greed_values,
              tooltip: {
                valueSuffix: ""
              }
            },
            {
              name: "Bitcoin",
              type: "spline",
              data: btc_close,
              tooltip: {
                valueSuffix: "$"
              }
            },
            {
              name: "Ethereum",
              type: "spline",
              data: eth_close,
              tooltip: {
                valueSuffix: "$"
              }
            }
          ]
        });

        // End Loader
        $(".lds-ripple").attr("hidden", true);
        $("#container").attr("hidden", false);
        $("#linlog").attr("hidden", false);

        // Switch button logic
        let isLogarithmic = false;
        document.getElementById("linlog").addEventListener("click", () => {
          chart.yAxis[0].update({
            type: isLogarithmic ? "linear" : "logarithmic"
          });
          isLogarithmic = !isLogarithmic;
        });
      });
    });
  });
});

// Data fetching
async function fetchHistorical() {
  const response = await fetch(
    "https://api.alternative.me/fng/?limit=0&date_format=ca"
  );
  const greed = await response.json();
  return greed;
}

async function fetchHistoricalBTC() {
  const response = await fetch(
    "https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&allData=true"
  );
  const btc = await response.json();
  return btc.Data.Data;
}

async function fetchHistoricalETH() {
  const response = await fetch(
    "https://min-api.cryptocompare.com/data/v2/histoday?fsym=ETH&tsym=USD&allData=true"
  );
  const eth = await response.json();
  return eth.Data.Data;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.css

body {
  background-color: #f3f3f3;
}

/*Source: https://loading.io/css/*/
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #102b91;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}