Steps to integrate trading view chart in Angular 2 onwards

Description:-

When we need to show the trade market watch using a candle stick chart. a charting library is a good option for it.

Charting library needs ohlc( open high low close and volume ) data to draw candlestick chart.

We can see candlestick chart with our data and for doing this we have steps to follow as below discussed:

1) we need to register with tradingview.com 

"https://www.tradingview.com"

2) To access charting library repository and documentation, we have to give request tradingview.com to add me my GitHub account.

"https://in.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/"

3) The charting library can be integrate the following two ways:

     i) JS API:- This provides real-time data that provides frequently changing data. For example through WebSocket. This way our chart will automatically gets updated with new prices when they arrive.

     ii) Udf compatible API:-  This gets updated on a pull/push/refresh basis, where chart data is updating every n number of second or it only gets reloaded manually by the user and write their own data feed wrapper.

I have used JS API to integrate and used WebSockets to get data frequently.

4) UDF compatible API have the following API to configure to our backend API

a) configuration
b) time
c) symbol 
d) history

their documentation is available on the official website of trading library https://github.com/tradingview/charting_library/wiki/UDF

To access the above URL, first, you have the login with the charting library provided GitHub account otherwise it will show 404.

After preparing backend API

5) We need to configure our API to trading chart library

a) datafeed.js (backend API integration) ===> It is pre-provided by trading chart library only we need to integrate this in our backend API to datafeed.js API

b) Trading chart constructor

c) Trading widget methods ( for example onChartReady) ===> If we need to change something in existing chart widget, we need these methods.

d) Trading chart method ( to change the resolution(interval) and symbol(market as BTC/USD) ) ===> If we need to change chart with some external operations, we need this method.

6) Following is the code for load trading view chart and this can be customized according to Clients requirement:

var _datafeed = new Datafeeds.UDFCompatibleDatafeed("http://yourhost/tradingview", 10000);
    var _widget = window.tvWidget = new TradingView.widget({
      symbol: 'AAPL',
      fullscreen:true,
      interval: '15',
      container_id: "tv_chart_container",
      datafeed: _datafeed,
      library_path: "/charting_library/",
      locale: getParameterByName('lang') || "en",
      disabled_features: ["use_localstorage_for_settings", "header_symbol_search", "symbol_search_hot_key"],
      debug: false,
      overrides: {
        "paneProperties.background": "#000",
        "paneProperties.vertGridProperties.color": "#565656",
        "paneProperties.horzGridProperties.color": "#565656",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor": "#AAA"
      }
    });

_widget.onChartReady(function() {
var chart=_widget.activeChart();
_widget.activeChart().setSymbol('BTCUSD', () => console.log('new symbol data has arrived: '));
});