Introduction

In the fast-paced world of cryptocurrency trading, having access to real-time data and analytics is crucial for making informed decisions. Bitquery is a powerful data analytics platform that provides developers with access to a vast amount of blockchain data through its API. With Bitquery's API, developers can easily retrieve and manipulate data from various blockchain networks, including Bitcoin, Ethereum, Binance Smart Chain, and more. One way to utilize this data is by building trading graphs, which can provide valuable insights into market trends and help traders make better decisions. In this article, we will explore how to build a trading graph using Bitquery's API and JavaScript. We will cover the steps required to retrieve and parse data from Bitquery's API and how to use a popular graphing library to display the data in a visually appealing and informatively. This article will walk you through the steps to plot a graph using Bitquery's API and Javascript.

That being said, before we begin developing the trading graph, it is imperative to understand what an API is.

What is an API?

API, also known as application program interface, is a medium through which software applications send, request, and receive digital information between themselves. Think of API as a waiter in a pizza shop who takes orders from the customer, takes them to the kitchen, and returns the ordered pizza to the customer.

What is Bitquery API?

Bitquery is a platform that allows users to access information stored on various public blockchains, such as Bitcoin, Ethereum, and Binance Chain, through a single API. It provides a unified interface to query the data stored on different blockchains, enabling developers to access and process this information more efficiently. Bitquery helps to streamline the process of accessing blockchain data, making it easier for developers to build applications that require this data. With Bitquery's API, developers can easily access and query blockchain data in real-time.

Additionally, bitquery provides insightful blockchain GRAPHQL APIs for use from over 30 blockchain networks which makes them one of the few to provide such services.

Bitquery also provides a user-friendly GRAPHQL playground for users willing to learn how to build query schemas for use. Above all, Bitquery also provides a great support team for users having issues with their products.

Learn more about bitquery here

The steps to start developing with bitquery API are as follows:

Step 1: Sign up for a Bitquery account

Before you can start using Bitquery's API, you need to sign up for an account on their website. The process is straightforward, and you only need to provide your email address and choose a password.

Step 2: Get an API key

Once you have created an account, you will need to generate an API key to access Bitquery's API. To do this, log in to your account, and click on the "API Keys" tab in the left-hand menu. Click on the "Generate New Key" button, and you will be presented with your API key.

Step 3: Choose a blockchain network

Bitquery supports several blockchain networks, including Bitcoin, Ethereum, Binance Smart Chain, and many more. Choose the network you want to work with and take note of its API endpoint.

Step 4: Build your query

Bitquery's API uses GraphQL, a powerful query language that allows you to retrieve data in a structured format. To build your query, you can use Bitquery's GraphiQL interface, which provides a user-friendly way to construct your queries.

For example, if you want to retrieve the price of a particular token on the Ethereum network, you can use the following query:

{
  ethereum(network: bsc) {
    dexTrades(
      baseCurrency: {is: "0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82"}
      quoteCurrency: {is: "0x55d398326f99059ff775485246999027b3197955"}
      options: {desc: ["block.height", "transaction.index"], limit: 1}
    ) {
      block {
        height
        timestamp {
          time(format: "%Y-%m-%d %H:%M:%S")
        }
      }
      transaction {
        index
      }
      baseCurrency {
        symbol
      }
      quoteCurrency {
        symbol
      }
      quotePrice
    }
  }
}

This query retrieves the price of CAKE in USDT from the pancake swap network.

Plotting Graph

Now that we have an idea of how to use the bitquery API to retrieve data from a specific blockchain network, we can also use this data to plot a graph. We will use a javascript graph library called lightweight chart to demonstrate this.

The first thing to do is to create a directory with the command below:

mkdir trade_graph

Change into the newly created object with:

cd trade_graph

Now, create two files namely, index.html and index.js respectively.

Graph Code

I will break the code to be added to the index.js file into three sections:

Create Query

Connect to Bitquery Endpoint

Create the graph with the fetched data

Create Query

const QUERY = ` 
{
  ethereum(network: ethereum) {
    dexTrades(
      options: {limit: 100, asc: "timeInterval.minute"}
      date: {since: "2021-05-23"}
      exchangeName: {is: "Uniswap"}
      baseCurrency: {is: "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984"}
      quoteCurrency: {is: "0xdAC17F958D2ee523a2206206994597C13D831ec7"}
    ) {
      timeInterval {
        minute(count: 5)
      }
      baseCurrency {
        symbol
        address
      }
      baseAmount
      quoteCurrency {
        symbol
        address
      }
      quoteAmount
      trades: count
      quotePrice
      maximum_price: quotePrice(calculate: maximum)
      minimum_price: quotePrice(calculate: minimum)
      open_price: minimum(of: block, get: quote_price)
      close_price: maximum(of: block, get: quote_price)
    }
  }
}

`;

Connect to Bitquery Endpoint

const endpoint = "https://graphql.bitquery.io/";

// Function which fetches the data from the API
async function fetchData() {
  const response = await fetch(endpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": "insert-your-apikey",
    },
    body: JSON.stringify({
      query: QUERY,
    }),
  });

  const data = await response.json();

Create the graph with the fetched data

const chart = LightweightCharts.createChart(document.body, {
    width: 800,
    height: 600,
  });

  const lineSeries = chart.addLineSeries();

  lineSeries.applyOptions({
    color: "#00027A",
    lineWidth: 3,
  });

  chart.applyOptions({
    watermark: {
      color: "#008080",
      visible: true,
      text: "Simple graph of UNI/USDT",
      fontSize: 24,
      horzAlign: "center",
      vertAlign: "center",
    },
  });

  // set data
  lineSeries.setData([
    {
      time: "2021-06-01",
      value: data.data.ethereum.dexTrades[0].maximum_price,
    },
    {
      time: "2021-06-02",
      value: data.data.ethereum.dexTrades[1].maximum_price,
    },
    {
      time: "2021-06-03",
      value: data.data.ethereum.dexTrades[2].maximum_price,
    },
    {
      time: "2021-06-04",
      value: data.data.ethereum.dexTrades[3].maximum_price,
    },
    {
      time: "2021-06-05",
      value: data.data.ethereum.dexTrades[4].maximum_price,
    },
    {
      time: "2021-06-06",
      value: data.data.ethereum.dexTrades[5].maximum_price,
    },
    {
      time: "2021-06-07",
      value: data.data.ethereum.dexTrades[6].maximum_price,
    },
    {
      time: "2021-06-08",
      value: data.data.ethereum.dexTrades[7].maximum_price,
    },
    {
      time: "2021-06-09",
      value: data.data.ethereum.dexTrades[8].maximum_price,
    },
    {
      time: "2021-06-10",
      value: data.data.ethereum.dexTrades[9].maximum_price,
    },
    {
      time: "2021-06-11",
      value: data.data.ethereum.dexTrades[10].maximum_price,
    },
    {
      time: "2021-06-12",
      value: data.data.ethereum.dexTrades[11].maximum_price,
    },
    {
      time: "2021-06-13",
      value: data.data.ethereum.dexTrades[12].maximum_price,
    },
    {
      time: "2021-06-14",
      value: data.data.ethereum.dexTrades[14].maximum_price,
    },
    {
      time: "2021-06-15",
      value: data.data.ethereum.dexTrades[15].maximum_price,
    },
    {
      time: "2021-06-16",
      value: data.data.ethereum.dexTrades[16].maximum_price,
    },
    {
      time: "2021-06-17",
      value: data.data.ethereum.dexTrades[17].maximum_price,
    },
    {
      time: "2021-06-18",
      value: data.data.ethereum.dexTrades[18].maximum_price,
    },
    {
      time: "2021-06-19",
      value: data.data.ethereum.dexTrades[19].maximum_price,
    },
    {
      time: "2021-06-20",
      value: data.data.ethereum.dexTrades[20].maximum_price,
    },
    {
      time: "2021-06-21",
      value: data.data.ethereum.dexTrades[21].maximum_price,
    },
    {
      time: "2021-06-22",
      value: data.data.ethereum.dexTrades[22].maximum_price,
    },
    {
      time: "2021-06-23",
      value: data.data.ethereum.dexTrades[23].maximum_price,
    },
    {
      time: "2021-06-24",
      value: data.data.ethereum.dexTrades[24].maximum_price,
    },
    {
      time: "2021-06-25",
      value: data.data.ethereum.dexTrades[25].maximum_price,
    },
    {
      time: "2021-06-26",
      value: data.data.ethereum.dexTrades[26].maximum_price,
    },
    {
      time: "2021-06-27",
      value: data.data.ethereum.dexTrades[27].maximum_price,
    },
    {
      time: "2021-06-28",
      value: data.data.ethereum.dexTrades[28].maximum_price,
    },
    {
      time: "2021-06-29",
      value: data.data.ethereum.dexTrades[29].maximum_price,
    },
    {
      time: "2021-06-30",
      value: data.data.ethereum.dexTrades[30].maximum_price,
    },
    {
      time: "2021-07-01",
      value: data.data.ethereum.dexTrades[31].maximum_price,
    },
    {
      time: "2021-07-02",
      value: data.data.ethereum.dexTrades[32].maximum_price,
    },
    {
      time: "2021-07-03",
      value: data.data.ethereum.dexTrades[33].maximum_price,
    },
    {
      time: "2021-07-04",
      value: data.data.ethereum.dexTrades[34].maximum_price,
    },
    {
      time: "2021-07-05",
      value: data.data.ethereum.dexTrades[35].maximum_price,
    },
    {
      time: "2021-07-06",
      value: data.data.ethereum.dexTrades[36].maximum_price,
    },
    {
      time: "2021-07-07",
      value: data.data.ethereum.dexTrades[37].maximum_price,
    },
    {
      time: "2021-07-08",
      value: data.data.ethereum.dexTrades[38].maximum_price,
    },
    {
      time: "2021-07-09",
      value: data.data.ethereum.dexTrades[39].maximum_price,
    },
    {
      time: "2021-07-10",
      value: data.data.ethereum.dexTrades[40].maximum_price,
    },
    {
      time: "2021-07-11",
      value: data.data.ethereum.dexTrades[41].maximum_price,
    },
    {
      time: "2021-07-12",
      value: data.data.ethereum.dexTrades[42].maximum_price,
    },
    {
      time: "2021-07-13",
      value: data.data.ethereum.dexTrades[43].maximum_price,
    },
    {
      time: "2021-07-14",
      value: data.data.ethereum.dexTrades[44].maximum_price,
    },
    {
      time: "2021-07-15",
      value: data.data.ethereum.dexTrades[45].maximum_price,
    },
    {
      time: "2021-07-16",
      value: data.data.ethereum.dexTrades[46].maximum_price,
    },
    {
      time: "2021-07-17",
      value: data.data.ethereum.dexTrades[47].maximum_price,
    },
    {
      time: "2021-07-18",
      value: data.data.ethereum.dexTrades[48].maximum_price,
    },
    {
      time: "2021-07-19",
      value: data.data.ethereum.dexTrades[49].maximum_price,
    },
    {
      time: "2021-07-20",
      value: data.data.ethereum.dexTrades[50].maximum_price,
    },
    {
      time: "2021-07-21",
      value: data.data.ethereum.dexTrades[51].maximum_price,
    },
    {
      time: "2021-07-22",
      value: data.data.ethereum.dexTrades[52].maximum_price,
    },
    {
      time: "2021-07-23",
      value: data.data.ethereum.dexTrades[53].maximum_price,
    },
    {
      time: "2021-07-24",
      value: data.data.ethereum.dexTrades[54].maximum_price,
    },
    {
      time: "2021-07-25",
      value: data.data.ethereum.dexTrades[55].maximum_price,
    },
    {
      time: "2021-07-26",
      value: data.data.ethereum.dexTrades[56].maximum_price,
    },
    {
      time: "2021-07-27",
      value: data.data.ethereum.dexTrades[57].maximum_price,
    },
    {
      time: "2021-07-28",
      value: data.data.ethereum.dexTrades[58].maximum_price,
    },
    {
      time: "2021-07-29",
      value: data.data.ethereum.dexTrades[59].maximum_price,
    },
    {
      time: "2021-07-30",
      value: data.data.ethereum.dexTrades[60].maximum_price,
    },
    {
      time: "2021-07-31",
      value: data.data.ethereum.dexTrades[61].maximum_price,
    },
    {
      time: "2021-08-01",
      value: data.data.ethereum.dexTrades[62].maximum_price,
    },
    {
      time: "2021-08-02",
      value: data.data.ethereum.dexTrades[60].maximum_price,
    },
    {
      time: "2021-08-03",
      value: data.data.ethereum.dexTrades[63].maximum_price,
    },
    {
      time: "2021-08-04",
      value: data.data.ethereum.dexTrades[64].maximum_price,
    },
    {
      time: "2021-08-05",
      value: data.data.ethereum.dexTrades[65].maximum_price,
    },
    {
      time: "2021-08-06",
      value: data.data.ethereum.dexTrades[66].maximum_price,
    },
    {
      time: "2021-08-07",
      value: data.data.ethereum.dexTrades[67].maximum_price,
    },
    {
      time: "2021-08-08",
      value: data.data.ethereum.dexTrades[68].maximum_price,
    },
    {
      time: "2021-08-09",
      value: data.data.ethereum.dexTrades[69].maximum_price,
    },
    {
      time: "2021-08-10",
      value: data.data.ethereum.dexTrades[70].maximum_price,
    },
  ]);
}

fetchData();

In the index.html file, copy the below code to display the graph.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      rel="icon"
      href="https://test.bitquery.io/wp-content/uploads/2020/08/favicon.png"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content=" TradingView built with Bitquery"
    />
    <link
      rel="apple-touch-icon"
      href="https://test.bitquery.io/wp-content/uploads/2020/08/favicon.png"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>TradingView and Bitquery</title>
    <style>
      * {
        align-items: center;
        text-align: center;
        font-family: "sanserif";
      }
      body {
        background-color: rgb(156, 152, 186);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h1>Tradingchart with Bitquery API section</h1>
    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

The above will compute a graph of UNI/USDT.

Conclusion

In this article, we have shown you how to plot a graph using Bitquery's API. By following the steps outlined above, you can retrieve blockchain data in real-time and visualize it on a graph, allowing you to gain valuable insights into blockchain networks. With Bitquery's powerful API and a graphing library of your choice, the possibilities are endless.