[chart] trading view 차트 활용하기 / 예제 / next / 권한

trading view 는 가상거래소에서 자주 사용하는 차트이다.

이번에 좋은 기회가 있어서 해당 차트를 사용하게 되었는데, 생각보다 소스가 이리저리 흩어져있어서 한번에 모아서 보고싶어서 정리해보려고 한다.

 

트레이딩뷰 활용하기

 

예제 

아래 github 에는 각각의 환경에서 설정한 트레이딩뷰의 세팅환경 예시를 볼 수 있다.

nextjs, angular, android 등등 각각의 개발 환경에서 세팅된 페이지를 볼 수 있고, 주기적인 업데이트가 이루어지기 때문에 틈틈히 확인하면서 개발하면 매우 도움이 된다. github 에 올려진 그대로 참고해서 만들어도 된다.

 

 

GitHub - tradingview/charting-library-examples: Examples of Charting Library integrations with other libraries, frameworks and d

 

 

next.js 활용

 

next 예제 링크

 

https://github.com/tradingview/charting-library-examples/tree/master/nextjs

 

 

 

권한 요청 사이트

이번에 내가 사용하는 환경은 next 환경인데, 기본적으로 트레이딩뷰의 예시코드에서 테스트를 하기 위해선 본사(?) 에 권한을 요청해야 한다. 아래 사이트로 이동해 권한 요청을 한 후, public/static 에 받은 파일을 넣으면 예시데이터를 확인하면서 개발할 수 있다.

아래 이미지와 같이 설명을 참고해서 진행하면 도움이 많이 된다.

 

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

 

 

 

 

 

트레이딩뷰 DOCS

트레이딩뷰 의 API 명세서 사이트 이다.

해당 사이트를 참고하면서 개발하면 많은 동움을 받을 수 있다.

예시코드가 잘 되어있어, 최대한 확인하면서 작성하면 편안하게 개발이 가능하다 

 

Datafeed API | Advanced Charts Documentation

 

 

예시

예시코드만 적용해도 이렇게 차트데이터를 받아볼 수 있다.

API 명세서를 잘 보면 우측 끝에 도달한 경우 기존 데이터가 있고, 없고 를 판별해 새로 데이터를 호출하는 방식으로 차트를 그릴 수 있다.

이와 별개로 여러가지 예시들이 많이 존재하니 재밌게 활용해보면 많은 기능들을 익힐 수 있다.