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.
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 Axios for making calls to Bitquery GraphQL API
Initiating a ReactJS project using
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.
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.
./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/Bitquery.js file inside the
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.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.
We’ll then start with initializing the
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.
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;
Then, we would use Axios to make a POST request to Bitquery GraphQL API inside the
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
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.
getBars is also an asynchronous function that takes
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.
getBars method is shown below
We are on purpose removing the
searchSymbols method and keeping
unsunscribeBars methods empty as they are of no use to us at this moment.
In the above code snippet,
datafeed library has been imported in line-4 and made into work in line-33.
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
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.