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
Also Read
