Marcius Studio
Published in

Marcius Studio

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:

  1. Fill request form on TradingView.com
  2. Waiting response on email from TradingView team
  3. 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.

Documentation

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)

Documentation

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:

UDF Documentation

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.

Working example

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

Save\Load methods

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.

Working example

Save\Load adapter

Similar to UDF adapter. On the server, setting-up endpoints to save/load data.

Documentation

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.

Documentation

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!

Marcius Studiohello@marcius.studioDiscordTelegram

If the post was helpful, “hit” the “claps” button, and show how u like it. “Follow” @marcius-studio, we publish interesting and useful cases!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store