웹페이지에 TradingView 차트 위젯 임베딩하기

많은 암호화폐 관련 사이트들에서 사용하고 있는 TradingView 차트 위젯을

직접 웹사이트에 삽입하는 방법을 설명해보려고 합니다.

 

먼저 TradingView에서 제공하고 있는 위젯의 종류는 다음과 같습니다.

 

• Advanced Real-Time Chart Widget
• Technical Analysis Widget
• Market Overview Widget
• Market Data Widget
• Stock Market Widget
• Economic Calendar Widget
• Ticker Widget
• Ticker Tape Widget
• Single Ticker Widget
• Mini Chart Widget
• Symbol Overview Widget
• Symbol Info Widget
• Forex Cross Rates Widget
• Forex Heat Map Widget
• Screener Widget
• Cryptocurrency Market Widget
• Fundamental Data Widget
• Company Profile Widget
• Timeline Widget

 

이렇게 다양한 정보를 제공하는 위젯을 통해 자신만의 웹사이트를 구성할 수 있습니다.

아래 예제는 이 중에서 Advanced Real-Time Chart Widget을 얻는 방법을 설명합니다.

 

먼저 이러한 위젯에 대한 정보를 얻기 위해서 다음과 같이

TradingView 사이트에서 우측 상단 메뉴

More > For business > Widgets을 선택합니다.

 

TradingView의 Widgets 하위 메뉴. 출처: https://www.tradingview.com/

 

Widgets 메뉴를 클릭하면 위에 설명한 위젯에 대한 설명과 예제 목록이 나타납니다.

이 중에서 'Advanced Real-Time Chart Widget' 화면에서 'Get Widget' 버튼을 클릭합니다.

 

Advanced Real-Time Chart Widget의 설명과 예제. 출처: https://www.tradingview.com/widget/

 

그럼 Widget 구성 화면이 나타나고 좌측 하단에는 웹 페이지에 삽입할 코드가, 우측 하단에는 다음과 같이 다양한 설정 정보가 나타납니다.

 

Advanced Real-Time Chart Widget 구성 화면. 출처: https://www.tradingview.com/widget/advanced-chart/

 

 

만약 업비트의 데이터 차트를 구성하고 싶다면,

우측 설정 정보 중 'Default symbol'에서 'UPBIT:'를 입력하면 다음과 같이 목록이 나타납니다.

 

TradingView에서 제공하는 업비트 데이터 목록

 

 

 

 

 

다음은 업비트 비트코인-원화 거래 정보를 이용한 차트 예시입니다.

 

UPBIT:BTCKRW 데이터 차트 설정 예제

 

차트 설정이 적용된 Advanced Real-Time Chart Widget 화면

 

제공되는 삽입할 코드 예시는 다음과 같습니다.

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_2288c"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCKRW/?exchange=UPBIT" rel="noopener" target="_blank"><span class="blue-text">BTCKRW Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": 980,
  "height": 610,
  "symbol": "UPBIT:BTCKRW",
  "interval": "D",
  "timezone": "Asia/Seoul",
  "theme": "light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "withdateranges": true,
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_2288c"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

 

이러한 위젯은 무료로 제공되고 있으니

TradingView가 제공하는 다양한 데이터 및 위젯을 사용해

사이트 구성에 활용해보시기 바랍니다.