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
If you are new to Bitquery’s interface, go to GraphQL IDE.
From here, sign up with your credentials. You might get a confirmation email from your registered email address.
After you are signed up, you would be redirected to GraphQL IDE from where you can get your unique API key.
This API key will be used while making the POST request to the API. We’ll be using TradingView’s Lightweight charts for this article/blog. TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts which are highly scalable too.
Starting off with TradingView
https://in.tradingview.com/ is the official site to get started with TradingView.
If you do not have an account on TradingView, you might be welcomed by a similar landing page. To start, click on Start free trial and you’ll be redirected to a page similar to the one shown below
Choose the Basic plan if you are just getting started and also for this particular article, we have used the Basic Plan of TradingView. When you click on Start now button, you will be redirected to a page similar to the one shown below
Sign up either using your Google, Twitter, Facebook, Yahoo, Linkedin account, or simply with your email address. Then, once your account gets created, move on to Free Charting Library by TradingView India
And click on the Get Library button in the Lightweight charts section which was done specifically for this article.
Installing the Lightweight charts library
ES6 via npm
Open up a terminal and navigate to your project’s root folder and run the following command
Using CDN
You can use unpkg:
https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js
The standalone version creates window.LightweightCharts object with all exports from esm version. In your root folder, you need to create two files; For our convenience let us name them index.html & index.js respectively.
In the tag of index.html, we need to mention the below tag in order to connect TradingView’s Lightweight chart to our HTML5 page.
Querying the data from the GraphQL API
Before we actually make the POST request to the GraphQL API, we will need to declare the graphQL query in our JavaScript code.
and the endpoint of Bitquery GraphQL API
Next, we’ll be using fetch API to make the POST request to the API and storing the result into a variable known as ‘data’.
Make sure to insert your unique API key which we generated earlier from GraphQL IDE
Integrating the Lightweight charts
Lightweight charts which we have access to using the CDN declared in the tag of index.html will be implemented as shown below
In the above code, the createChart method initializes a Lightweight chart in the body tag of the HTML page as directed by its first argument i.e. document.body and the second argument/parameter specifies the height and width of the TradingView chart.
After that, we’ll be instantiating a line-series type of graph. To do so,
This lineSeries chart would be referring to the highest or the maximum price reached for a particular time interval for a random token on Uniswap exchange.
Now, we would be specifying the line-width of the lineSeries along with the color and applying a watermark to the chart using the below code.
To refer to the documentation for further specifications and functionalities of Lightweight charts in TradingView refer to their official documentation using this link.
Now, we’ll be plotting the data obtained from the Bitquery API into the Lightweight chart using the setData( ) as shown below,
Then, we’ll wrap the entire code inside index.js into an asynchronous function. We’ll obtain a similar chart on our HTML5 page as shown
And the HTML code must look similar to the one shown below (only if you have used a non-modular way of developing the same)
The above chart is one that has been generated using the TradingView CDN and the data it has been plotted upon has been requested from Bitquery’s GraphQL API.