Trading View Chart Integration

Description:-

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

Charting library need ohlc( open high low close and volume ) data to draw candle stick chart. http://www.oodlestechnologies.com/blogs/How%20To%20Get%20ohlc%20Value%20In%20mysql

We can draw candle stick chart with own data ()

1) we have 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) Charting library can be integrate following two way
     i) Js api:- update in real-time with a push type connection , for example through websocket. This way your chart will autoupdate with new prices when they arrive.

     ii) Udf compatiable api:- update on a pull/push/refresh basis (like most web-based charts today), where chart data is updating every x no of second ( chart client will ask the server emulating push update), or only get reloaded manually by the user and write your own datafeed wrapper.

i am here to use udf compatiable api to integrate 

4) UDF compatiable api have follwing api to configure to our backend api

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

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

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

After preparing backend API

5) we have to configure our api to trading library

a) datafeed.js (backend api integration)---> It is available by trading chart library only we need to integrate our backend api to datafedd.js api's
b) trading chart constructor ( load trading chart on web view)
c) trading widget method( for example onChartReady)
d) trading chart method( to change resolution(interval) and symbol(market as btcusd) )

6) Following are the code for load trading view chart

    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": "#222222",
        "paneProperties.vertGridProperties.color": "#454545",
        "paneProperties.horzGridProperties.color": "#454545",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor": "#AAA"
      }
    });
       

7) To change the symbol we have following method

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

Thanks 
I hope this will be helpful