Bitquery API integration with TradingView Technical Analysis Charts (DEX APIs)

Technical Analysis (TA) Charts is a powerful, scalable, and informative charting library provided by Tradingview.

This article focuses on integrating Tradingview’s TA charts with Bitquery’s GraphQL API in a ReactJS web application.

The above is an example of Tradingview’s TA chart. TA charts can be a great help to investors and traders for all purposes. One can use Bitquery DEX API and can visualize the token’s pricing data on the Technical Analysis Charts.

Integrating Bitquery GraphQL API with Tradingview’s TA Chart

Before we can move on to the complex stuff, you need to make sure that you have

the access to the charting library code in Github. If you are new to Tradingview’s Technical Analysis charts, please go through this link.

Installing Dependencies

Installing Axios for making calls to Bitquery GraphQL API

Initiating a ReactJS project using

Copying necessary files in the project folder

After getting access to the charting library, you need to copy two folders from https://github.com/tradingview/charting_library, charting_library, and datafeeds

into the ./public folder of our React project and only charting_library folder into the ./src folder of our React project.

Adding a container

You need to have some DOM containers that will be used to display the chart. In the HTML file index.html in your project’s ./public folder and add the following code.

Setting components

In the ./src folder, make a separate folder named ./components to keep all the components used in this project separately so it’s easy for us to identify them. We will then make a ./TVChartContainer/datafeed.js & ./TVChartContainer/Bitquery.js file inside the ./components folder.

Bitquery.js

In this file, we’ll be initializing all the GraphQL queries with which we would make the API calls. We will be initializing values for the endpoint and two GraphQL queries, one to return the baseCurrency object and the other to return the values of the coin bars. The queries and the endpoint are as shown below

Datafeed

The datafeed.js file will create a Charting Library Widget. The Charting Library is used to display financial data, but it doesn’t contain any data itself. Whatever you have, a web API, a database, or a CSV file, you can display your data in the Charting Library. Datafeed is an Object you supply to the TradingView Widget. It has a set of methods like “getBars” or “resolveSymbol” that are called by the Charting Library in certain cases. The datafeed returns results using callback functions.

In the first line of the datafeed.js, we need to import Axios and make a variable to reference all our GraphQL queries which are stored in Bitquery.js file. We will then, set the resolution of the charts. In this example we are allowing the options of 1m, 5m, 15m, 30m, 60m, 1D, 1W, and 1M. The code below explains the above.

onReady

We’ll then start with initializing the onReady method. onReady is used by the charting library to get a configuration of your datafeed (eg: supported resolutions, exchanges, and so on). This is the first method of the datafeed that has been called.

resolveSymbol

This method is used by the library to retrieve information about a specific symbol (exchange, price scale, full symbol, etc.). It is an asynchronous function which takes 3 arguments/parameters; symbolName, onSymbolResolvedCallback & onResolveErrorCallback.

Then, we would use Axios to make a POST request to Bitquery GraphQL API inside the resolveSymbol method.

If you are not familiar with how to generate your unique API key through Bitquery GraphQL API, then please sign up here and click on the profile icon.

After the POST request is successful, we’ll store the value from the API in a variable ‘coin’ as shown in the code below.

Additional configuration of the resolveSymbol could be found in the documentation of the charting_library. For our convenience, below is the code for the additional configurations.

This is the complete onResolve function

getBars

Our next step would be to implement the getBars method. This method is used by the Charting Library to get historical data for our symbol. It basically calls the OHLC data and formats the return data for the charts to be able to process it.

Just like onResolve, getBars is also an asynchronous function that takes symbolinfo, resolution, from, to, onHistoryCallback, onErrorCallback & first as its parameters/arguments. Inside the getBars method, we’ll be making a try and catch block and making a POST request call using Axios to Bitquery GraphQL API to process GET_COIN_BARS query in order to obtain data which can be set into a candlesticks format to show in the final product.

We’ll save the response which got from the API call in a variable called ‘bars’ and we’ll implement the map( ) function to set the data for the opening, closing, maximum and minimum prices of a candlestick.

The complete getBars method is shown below

We are on purpose removing the searchSymbols method and keeping subscribeBars and unsunscribeBars methods empty as they are of no use to us at this moment.

Inserting datafeed properties in TVChartContainer

In the above code snippet, datafeed library has been imported in line-4 and made into work in line-33.

Injecting Component to App.js

After that, we need to inject <TVChartContainer /> container inside the App.js and the code inside it must be similar to this

Furthermore, make sure that ReactDOM.render( ) works perfectly within the Index.js

Running the ReactJS project

To run the project, run the following command in the root folder of our ReactJS project

Using the indicator markdown in the Technical Chart, select Moving Average Exponential indicator and you’ll notice a blue line passing through the candlesticks. This is the Exponential Moving Average criteria which is a type of weighted moving average (WMA) that gives more weighting or importance to recent price data.

A glimpse of the final product

Link to all the Gists

Link to the Github code

Also Read

Hi I’ve follow along the all tutorial, but I wasn’t able to display anything even following the final github repo read.me it raised me this error :arrow_down:

Any Idea on how I can fix this ?

1 Like

Hi @gaurav thank you for the tutorial.
I followed with your tutorial , but i noticed that when i go to the webpage , it renders the charts but it does not show any candlestick data on the chart .
i waited for few minutes to see if it will load , but it didnt.

Then I tried to enter name of the coin but still nothing and all i got was these errors :


although nothing is showing up the api consumption is increasing

Hi The first issue above is something with setting up the react project itself and nothing to do with the charts. Try looking for some youtube videos on properly setting up the react app.

The second issue is that with this guide you should be building an external search bar in the react app for the contract address. The search bar in the chart itself is disabled because of the nature of the api calls that need to be made. That being said for testing purposes you can change the token address in the symbol field of TVChartCointainer file. Specifically in your case it shows an error for the time format so make sure you have that configured properly as well.

This guide was created as a boilerplate so it will still need additional work to make your integration useful. You can go to Cryptowatch App to see the project this guide was based on and see what additional features can be implemented.

2 Likes

There is a correction in the github code

// line-8 
document.getElementById('tv_chart_container') 
1 Like

Runs fine in my device. I got a few errors in the start but I guess after

npm install

things did work out

2 Likes

There are a few changes in the Github repository for the same issue

1 Like

Can I change the Candlestick graph into a Bar graph with the same query?

The query we used in this particular tutorial is specific to return data related to Candlesticks. You might not get the appropriate result if you do so.

1 Like

Thank you for sharing. Will there be a tutorial for NuxtJS or VueJS as well?

1 Like

Yes it’ll be made soon

1 Like

@cryptowatch Thank you for explaining , I am fairly new to Javescript and didnt knew that.
I changed the symbol address from the tvChartContainer and also from the bitquery.js file
Still it didnt show any bars .

I Logged the Bars Like this to see whats going on inside the code :

if (bars.length<1){
                onHistoryCallback(bars, {noData: true },
				console.log(bars) ,
				); 
				
            }else{
                onHistoryCallback(bars, {noData: false},
				console.log(bars) ,
				); 
            }

and it seems like there is no bar data since it gave me something like this :

@sayon and @cryptowatch do you guys have any suggestion as to what the issue could be ?

What Symbol address you added?

Hi @gaurav . I used multiple different addresses, but all of them had the same issue.
The one in the screenshot is vADA and contract address is : “0x9a0af7fdb2065ce470d72664de73cae409da28ec”

Are you comfortable with sharing the query with us because this particular tutorial uses a query specific to display Candlesticks data

Yeah that worked. Thanks :money_mouth_face:

Hi @sayon do you mean this :

export const GET_COIN_BARS = `
{
  ethereum(network: bsc) {
    dexTrades(
      options: {asc: "timeInterval.minute"}
      date: {since: "2021-06-20T07:23:21.000Z", till: "2021-06-23T15:23:21.000Z"}
      exchangeAddress: {is: "0xcA143Ce32Fe78f1f7019d7d551a6402fC5350c73"}
      baseCurrency: {is: "0x9a0af7fdb2065ce470d72664de73cae409da28ec"},
      quoteCurrency: {is: "0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c"},
      tradeAmountUsd: {gt: 10}
    ) 
    {
      timeInterval {
        minute(count: 15, format: "%Y-%m-%dT%H:%M:%SZ")  
      }
      volume: quoteAmount
      high: quotePrice(calculate: maximum)
      low: quotePrice(calculate: minimum)
      open: minimum(of: block, get: quote_price)
      close: maximum(of: block, get: quote_price) 
    }
  }
}
`;

I meant the query that you incorporated in your project. Is this the one?

I am using your code from the github repository so i thought this would be the one ?

Yes as you can see, this particular GraphQL query returns values which a Candlestick chart would incorporate within it. So I guess while using the same graphql query in Bar chart might not return the appropriate values.