Sep 19, 2020
Connecting and settings TradingView with JS API and UDF adapter
Cookbook article for #TradingView #charts with #OpenSource solutions for the #cryptocurrency #exchange #Binance and #Forex.
Статья на русском языке: https://habr.com/ru/post/519784/
Hello World!
The TradingView library (charting_library) has a high entry threshold, but it did not become less popular due to the fact that it is used on the TradingView.com service of the same name. I decided to make a “cookbook” with answers to basic questions.
This article is a continuation of the post: “Financial charts for your application”.
Cookbook
The content will be supplemented as new difficulties appear. If you have questions and you did not find the answers in the article, write in the comments, we will figure it out together :)
In the article I will provide links to documentation. If, when you click on the link, you get a 404 page, it means that you do not have access.
License
Can be used for free for commercial and non-commercial use. The most important criterion is the safety of company logo on the charts.
When requesting access to charts, be sure to specify the destination domain where they will be used. When implementing one of the projects, we connected the Forex data to the chart, set everything up and launched. For the 2nd month, the customer did not pay for Forex data, because of this, chart were not fully loaded and the logo was missing. After this situation, the inspector contacted the customer by e-mail with questions to clarify the situation.
Getting access
Library has private access on GitHub, to get it you need:
- Fill request form on TradingView.com
- Waiting response on email from TradingView team
- Access the repository on GitHub
My experience of gaining access
About 4 weeks after filling out the application, I was sent a contract for signing. Access to the library was opened 3 days after the signing.
No chart is displayed, even with test data
To solve this, you need to connect the widget and globally specify access to the library.
Widget connection
// for Nodejs
import {widget} from ‘../../charting_library/charting_library.min’
const widget = new widget ({<options>})Access to the library
Specify the global path to the charting_library folder in widget options: library_path : ‘/ charting_library /’
The global path will differ from modules used. In my case, Vuejs is used with the indication in vue.config.js => publicPath: ‘/’. Folder structure: /public/index.html, /public/charting_library/ and widget settings above.
Data connection
The basic version uses test data. Next, you need to connect your data provider using one of two solutions: JS API or UDF. It will not be possible connect data array directly. We will consider JSAPI, UDF is connected in the same way, with the difference in specifying the endpoint on the server from where it will receive data.
- JS API — client side connection
- UDF — connection on the server side
The main difference between JSAPI and UDF is that there is no way for UDF to add a WebSocket connection. When specifying the endpoint on the server, you set the interval for each request: datafeed: new Datafeeds.UDFCompatibleDatafeed (‘http://localhost: 3000/datafeed’, 1000)
TradingView JS API adapter
To configure the adapter, you need to understand each hook is executed sequentially, and for debugging it is better to add the console.log (‘[<hook name>]: Method call’) output to the console.
Startup sequence: onReady => resolveSymbol => getBars => subscribeBars => unsubscribeBars.
If you change timeframe, symbol, unsubscribeBars hook is called, which calls your function, which resets the WebSocket connection to data provider. If you don’t use subscribeBars, then you don’t need unsubscribeBars either. The getServerTime hook is optional, but if you need to use the server time, include it.
If the data provider does not give volumes, you can specify in the resolveSymbol hook — has_no_volume: true.
Sometimes the data provider does not allow requesting data directly from the client, for example, the Binance exchange, so the request can be passed through a proxy.
JS API Documentation | Working example
TradingView UDF adapter
The UDF adapter is relevant when data is requested from its server. In the client’s constructor, you need to specify datafeed: new Datafeeds.UDFCompatibleDatafeed (‘http://localhost:3000/datafeed’, 1000) and setting-up server side:
JS API getBars hook called many times
This happens when there is not enough data and library tries to load more. The getBars hook has a firstDataRequest parameter that returns a boolean true/false, use that. Returns true only when the market is loaded.
getBars: (symbolInfo, interval, from, to, onHistoryCallback, onErrorCallback, firstDataRequest) => { console.log('[getBars] Method call', symbolInfo, interval) console.log('[getBars] First request', firstDataRequest)if (firstDataRequest) { console.log('do something')}}
My data provider does not have a WebSocket connection
It is not necessary to use a UDF provider if there is no stream. The interval of requests cannot be set for the JS API adapter, but this does not prevent us from adding setInterval to subscribeBars and sending data for updating.
Design customization
There are two themes available by default: theme: “Light” || “Dark”. You can also use your own color scheme. Over time, you will have problem when colors have changed everywhere, except for the header_widget (the top block with search, compare, etc. buttons), it needs to be changed through *.css.
In the widget options you need to specify: custom_css_url: ‘/tradingview.css’, where / is the absolute path from your index.html. With content:
.chart-controls-bar {
border-top: none !important;
}.chart-page, .group-wWM3zP_M- {
background: transparent !important;
}.pane-separator {
display: none !important;
}
Saving data
You may need to save “drawing”.
The easiest option that you can use if you do not plan to draw a lot on charts. Simple, because you can call the object with all the chart data widget.save (cb => this.setOverlay (cb)) and save it wherever it is convenient.
Similar to UDF adapter. On the server, setting-up endpoints to save/load data.
Something doesn’t work for me, I do everything according to the documentation
A real case, a freelancer approached with a project, the project was old, he was rewriting it. As a result, there was simply an old version of the library. Check the version.
Another situation, when they try to call methods on an unloaded chart, track the state through onChartReady. If there is no reactivity under the hood, use the Observer pattern to track the loading of the chart.
widget.onChartReady(function() {
// It's now safe to call any other methods of the widget
});Library charts differ from versions on TradingView.com
Yes, it is normal.
How to add orders to the chart
After adding an order to the chart, there is no access to the array, so you need to track the orders yourself. I will share my solution in a mixin format for Vuejs, the essence will be clear.
How to add shapes, “drawers” to a chart (line, notes, channels, etc.)
You can add only the shapes suggested by the library, which are used in the toolbar. This is necessary when you need to display information on a graph.
Documentation | List of available forms
I want to use PineScript
charting_library does not support this functionality. PineScript can be rewritten in JavaScript and use algorithm on the client or server side.
I want to add my own indicator
Look towards Custom Studies
I want to use several charts in one window
There is no such functionality in free version of charting_library. If necessary, you can do it yourself HTML + CSS.
Open source
Сonnected Binance exchange with JS API adapter and WebSocket stream
Forex data for JS API adapter. 1 minute data refresh without WebSocket with Save\Load methods
Conclusion
The article will be supplemented. If there is a case with a problem — a solution, write, I will supplement the article with attribution. Perhaps questions and wishes, write in the comments, it will be interesting to hear your opinion :)
Thanks for your attention!
If the post was helpful, “hit” the “claps” button, and show how u like it. “Follow” @marcius-studio, we publish interesting and useful cases!
