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

**URL:** https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244
**Category:** GraphQL Tutorials
**Tags:** tradingview, reactjs
**Created:** [June 28, 2021, 10:31am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244 "2021-06-28T10:31:36Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![gaurav](https://avatars.discourse-cdn.com/v4/letter/g/b487fb/32.png) [@gaurav](https://community.bitquery.io/u/gaurav)
#### Post date: [June 28, 2021, 10:31am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/1 "2021-06-28T10:31:37Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/39e3ad4d79e4581c9a72330333ca14a3fa17e938.png)

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](https://in.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/?feature=technical-analysis-charts).

[![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/5d2ef6dfdcf91ff7b7398d978ce8256a9f5aee12.jpeg "How to Show Blockchain Data on Tradingview Charts with Bitquery") ](https://www.youtube.com/watch?v=mZSYoU967vg)

## Installing Dependencies

Installing Axios for making calls to Bitquery GraphQL API

> <https://gist.github.com/sayon-bitquery/1a91242b6db01e8eb2a8c25de9bdb032>

Initiating a ReactJS project using

> <https://gist.github.com/sayon-bitquery/4802537404d7982af68c8e7c404af8f3>

## 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](https://github.com/tradingview/charting_library), charting\_library, and datafeeds

 ![image](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/727cb09769ca31e0ca90df03d1c254fb79fd7d67.png)

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](https://github.com/tradingview/charting-library-tutorial/blob/master/index.html) in your project’s ./public folder and add the following code.

> <https://gist.github.com/sayon-bitquery/ee6bc0debe5b9fd962455d64dd76d16a>

## 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

> <https://gist.github.com/sayon-bitquery/13532e09703ce541e51ac8850c58f4c3>

## 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.

> <https://gist.github.com/sayon-bitquery/28de6794ad1663efc00dd154e09ee272>

**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.

> <https://gist.github.com/sayon-bitquery/03d94774fd4b7b2ceb9ac273656ecf37>

**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.

> <https://gist.github.com/sayon-bitquery/3829f48c61bd3b89ebb28d0677b4d45f>

If you are not familiar with how to generate your unique API key through Bitquery GraphQL API, then please sign up **[here](http://graphql.bitquery.io/)** 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.

> <https://gist.github.com/sayon-bitquery/7101ab9e2862d86817ee6550bfd969e6>

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.

> <https://gist.github.com/sayon-bitquery/28114859caaa723ee86cecbaa79e2867>

This is the complete `onResolve` function

> <https://gist.github.com/sayon-bitquery/65d5d0f5669554748d939db0558af2df>

**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

> <https://gist.github.com/sayon-bitquery/6aff233e277c754857845b1f852ad7c4>

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

> <https://gist.github.com/sayon-bitquery/0aaa2fa0f8314b4867c235787c5eb65a>

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

> <https://gist.github.com/sayon-bitquery/1d0d7e99a2199a8732cd0f839cdf7b68>

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

> <https://gist.github.com/sayon-bitquery/6c460da8e6f921f3a48d127a699c4462>

## Running the ReactJS project

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

> <https://gist.github.com/sayon-bitquery/1de269abaeced0a9f76d12d12d494f41>

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.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/dcf7ccf84554e44ddfa89e6adadbf8bf78c50f11.jpeg)

## A glimpse of the final product

 ![image](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/8fd9449011b82b5ae1376f5f32353ddac62b9c72.png)

[Link to all the Gists](https://gist.github.com/sayon-bitquery)

[Link to the Github code](https://github.com/sayon-bitquery/tradingview-two)

**Also Read**

> [@TradingView Charts integration with Bitquery APIs (Lightweight Charting)](https://community.bitquery.io/t/tradingview-charts-integration-with-bitquery-apis-lightweight-charting/211):
>
> In this article, we will be integrating Bitquery’s GraphQL API with TradingView’s Lightweight charting library. TradingView provides more than 50 different features for data analysis through its interactive charts and highly scalable platform. The Lightweight Charting Library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance. Sign up to [Bitquery.io](http://Bitquery.io) If you are new to Bitquery’s i…

---

<div class="post-metadata">

### Author: ![florentino](https://avatars.discourse-cdn.com/v4/letter/f/779978/32.png) [@florentino](https://community.bitquery.io/u/florentino)
#### Post date: [June 29, 2021, 12:49pm UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/2 "2021-06-29T12:49:23Z")

</div>

Hi I’ve follow along the all tutorial, but I wasn’t able to display anything even following the final github repo [read.me](http://read.me) it raised me this error ⬇

Any Idea on how I can fix this ?

 ![Capture d’écran 2021-06-29 à 2.39.37 PM](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/d0eb8571578aad6d351adadc36dbd02ee86a738f.png)

---

<div class="post-metadata">

### Author: ![Rio](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@Rio](https://community.bitquery.io/u/Rio)
#### Post date: [June 29, 2021, 2:15pm UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/3 "2021-06-29T14:15:50Z")

</div>

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 :

 ![Screenshot_72](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/d8c901e44636d6933bf2e81b062fbb6358d1f2ad.png)  
although nothing is showing up the api consumption is increasing

---

<div class="post-metadata">

### Author: ![cryptowatch](https://avatars.discourse-cdn.com/v4/letter/c/aeb1de/32.png) [@cryptowatch](https://community.bitquery.io/u/cryptowatch)
#### Post date: [June 29, 2021, 10:00pm UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/4 "2021-06-29T22:00:59Z")

</div>

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](https://app.cryptowatch.biz/#/charts) to see the project this guide was based on and see what additional features can be implemented.

---

<div class="post-metadata">

### Author: ![sayon](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@sayon](https://community.bitquery.io/u/sayon)
#### Post date: [June 30, 2021, 3:32am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/5 "2021-06-30T03:32:44Z")

</div>

There is a correction in the github code

```auto
// line-8 
document.getElementById('tv_chart_container') 

```

---

<div class="post-metadata">

### Author: ![sayon](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@sayon](https://community.bitquery.io/u/sayon)
#### Post date: [June 30, 2021, 5:07am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/7 "2021-06-30T05:07:58Z")

</div>

There are a few changes in the [Github repository](https://github.com/sayon-bitquery/tradingview-two) for the same issue

---

<div class="post-metadata">

### Author: ![ankita](https://avatars.discourse-cdn.com/v4/letter/a/91b2a8/32.png) [@ankita](https://community.bitquery.io/u/ankita)
#### Post date: [June 30, 2021, 10:26am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/8 "2021-06-30T10:26:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sayon](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@sayon](https://community.bitquery.io/u/sayon)
#### Post date: [June 30, 2021, 12:34pm UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/10 "2021-06-30T12:34:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![orates](https://avatars.discourse-cdn.com/v4/letter/o/4bbf92/32.png) [@orates](https://community.bitquery.io/u/orates)
#### Post date: [June 30, 2021, 3:20pm UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/11 "2021-06-30T15:20:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sayon](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@sayon](https://community.bitquery.io/u/sayon)
#### Post date: [June 30, 2021, 4:42pm UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/12 "2021-06-30T16:42:05Z")

</div>

Yes it’ll be made soon

---

<div class="post-metadata">

### Author: ![Rio](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@Rio](https://community.bitquery.io/u/Rio)
#### Post date: [June 30, 2021, 9:54pm UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/13 "2021-06-30T21:54:46Z")

</div>

@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 :

```auto
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 :

 ![Screenshot_77](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/3032900f16b947719e9218af2e06dda7b5679e66.png)

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

---

<div class="post-metadata">

### Author: ![gaurav](https://avatars.discourse-cdn.com/v4/letter/g/b487fb/32.png) [@gaurav](https://community.bitquery.io/u/gaurav)
#### Post date: [July 1, 2021, 5:11am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/14 "2021-07-01T05:11:52Z")

</div>

What Symbol address you added?

---

<div class="post-metadata">

### Author: ![Rio](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@Rio](https://community.bitquery.io/u/Rio)
#### Post date: [July 1, 2021, 6:42am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/15 "2021-07-01T06:42:59Z")

</div>

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”

---

<div class="post-metadata">

### Author: ![sayon](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@sayon](https://community.bitquery.io/u/sayon)
#### Post date: [July 1, 2021, 7:05am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/16 "2021-07-01T07:05:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ankita](https://avatars.discourse-cdn.com/v4/letter/a/91b2a8/32.png) [@ankita](https://community.bitquery.io/u/ankita)
#### Post date: [July 1, 2021, 7:10am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/17 "2021-07-01T07:10:22Z")

</div>

Yeah that worked. Thanks 🤑

---

<div class="post-metadata">

### Author: ![Rio](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@Rio](https://community.bitquery.io/u/Rio)
#### Post date: [July 1, 2021, 7:37am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/18 "2021-07-01T07:37:12Z")

</div>

Hi @sayon do you mean this :

```auto
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) 
    }
  }
}
`;

```

---

<div class="post-metadata">

### Author: ![sayon](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@sayon](https://community.bitquery.io/u/sayon)
#### Post date: [July 1, 2021, 7:54am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/19 "2021-07-01T07:54:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Rio](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@Rio](https://community.bitquery.io/u/Rio)
#### Post date: [July 1, 2021, 7:55am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/20 "2021-07-01T07:55:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sayon](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@sayon](https://community.bitquery.io/u/sayon)
#### Post date: [July 1, 2021, 7:57am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/21 "2021-07-01T07:57:20Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Rio](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@Rio](https://community.bitquery.io/u/Rio)
#### Post date: [July 1, 2021, 8:09am UTC](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244/22 "2021-07-01T08:09:19Z")

</div>

Okay can you provide the query you used in the tutorial for study purpose ? its my first time with graphql and Js in general so i am a bit lost and i thought that your code included all the necessary components

[Next page](https://community.bitquery.io/t/bitquery-api-integration-with-tradingview-technical-analysis-charts-dex-apis/244.md?page=2)