LapTrinhBlockchain

Chia sẻ kiến thức về Lập Trình Blockchain

Kiến thức Blockchain, Lập trình Blockchain, Lập trình Công cụ, Nâng cao Kiến thức

Hướng dẫn tích hợp Charting Library của TradingView với dữ liệu của riêng bạn trên website

Hướng dẫn tích hợp Charting Library của TradingView với dữ liệu của riêng bạn trên website

Hướng dẫn tích hợp Charting Library của TradingView với dữ liệu của riêng bạn trên website

Chia sẻ bài viết
5
(91)

Ai tham gia Blockchain và Crypto Currency thì không còn lạ lẫm gì với TradingView, một công cụ rất mạnh để hỗ trợ phân tích kỹ thuật cho 1 đồng Coin / Chứng khoán / Index,… Nhưng làm thế nào bạn sử dụng được giao diện của TradingView trên chính website của bạn, với dữ liệu mà do chính bạn đã thu thập được. Bài này mình sẽ hướng dẫn các bạn developer thực hiện tích hợp TradingView lên website của bạn.

Để tích hợp bạn cần:

  • Step 1: Tải thư viện Charting Library của TradingView
  • Step 2: Tạo DataFeeder tương thích với TradingView

Step 1: Tải thư viện Charting Library của TradingView

Charting Library là một giải pháp độc lập mà bạn có thể tải xuống, lưu trữ trên máy chủ của mình, kết nối dữ liệu của riêng bạn và sử dụng miễn phí trong trang web hoặc ứng dụng của bạn. Bộ thư viện Charting Library này viết bằng Javascript giúp chúng tao tạo biểu đồ chuyên nghiệp như trên TradingView. Toàn bộ API của Charting Library bạn xem tại: TradingView Charting Library. Nhưng làm thế nào để có được bộ thư viện Charting Library để có thể chạy dưới local hoặc trên website của bạn?

Có nhiều cách để bạn có được bộ thư viện Charting Library của TradingView.

Tải trực tiếp từ trang web chính thức của TradingView

Bạn vào trang thư viện Charting Library của TradingView để tải thư viện về. Hiện tại có ba loại:

  • Lightweight Charts: Bản miễn phí và mã nguồn mở với kích thước chỉ 45K.
  • Technical Analysis Charts: Biểu đồ hỗ trợ mạnh cho các nhà phân tích kỹ thuật. Bản này cũng miễn phí nhưng để nhận được bộ thư viện bạn phải gửi 1 request tới TradingView và bạn phải là tổ chức.
  • Charting & Trading Platform: Giao diện đầy đủ như trên trang TradingView với nhiều tính năng nâng cao. Để có bộ thư viện, bạn cũng phải gửi request tới TradingView và bạn phải là tổ chức.
Thư viện Charting Library của TradingView
Thư viện Charting Library của TradingView

Lightweight Chart thì khá đơn giản, thông thường chúng ta cần tích hợp bản Technical Analysis Charts vào website. Để có code bản Technical Analysis Charts thì bạn phải request tới TradingView khá phức tạp, bạn phải là một tổ chức, bạn phải nói lý do do hợp lý. Nói chung cũng không dễ.

Tải từ trang web của bên thứ ba

Bạn có thể tìm kiếm một số bên chia sẻ thư viện này trên Google. Tôi search và có tìm ra trang web https://www.bse-sofia.bg/tradingview có chia sẻ. Bạn dùng các tool tải toàn bộ các file từ website để tải về. Nhưng bạn nhớ rằng, những trang này có thể online nhưng có thể offline bất cứ lúc nào. Trên Ubuntu bạn có thể dùng lệnh:

wget -r --no-check-certificate --level=6 https://www.bse-sofia.bg/tradingview

Bản tradingview-demo-02 này mình không tiện chia sẻ public. Nếu ai thực sự cần có thể liên hệ lại. Tốt nhất các bạn cứ lấy trực tiếp từ website về.

Bạn có thể tham khảo thêm tại: charting-library-examples hoặc TradingView-API

Ngoài ra bạn có thể lấy charting-library từ mã nguồn của Sunswap-Frontend.

Lấy bộ thư viện từ DexScreener

Nếu bạn là tổ chức thì bạn nên thực hiện request tới TradingView, còn nếu bạn chỉ là cá nhân thì các bạn có thể lấy bộ thư viện này từ bên khác. Lúc đầu tôi định lấy trừ trang Technical Analysis Charts Demo, nhưng tên file bị thay đổi liên tục mỗi khi request nên không sử dụng được.

Sau đó tôi thấy rằng thư viện trading view trên trang DexScreener có vẻ chuẩn hơn, tên file không bị thay đổi. Tôi đã lấy thử thư viện trang này và đã thành công chạy được. Có trên 80 tệp jscss, vì bạn phải chấp nhận mất chút thời gian để tải từng file được. Các bước thực hiện:

Thiếu file nào thì lấy file đó trên DexScreen
Thiếu file nào thì lấy file đó trên DexScreen

Sau khi lấy được hết các tệp cần thiết, chạy thử ở local bạn sẽ được giao diện như thế này (Mình đổi sang dark theme):

Giao diện khi chạy của bộ thư viện hoàn chỉnh
Giao diện khi chạy của bộ thư viện hoàn chỉnh

Bản tradingview-demo-01 này mình không tiện chia sẻ public. Nếu ai thực sự cần có thể liên hệ lại. Tốt nhất các bạn cứ chịu khó làm như mình chia sẻ là được, muốn có thành quả cũng phải mất công một chút.

Step 2: Tạo DataFeeder tương thích với TradingView

Đầu tiên bạn phải đọc hướng dẫn từ trang TradingView: Connecting Data. Theo hướng dẫn từ trang này bạn có thể kết nối dữ liệu theo 2 cách:

  • C1: Bạn tự xây dựng 1 API theo đúng chuẩn UDF. Giống như API dữ liệu demo của TradingView: https://demo-feed-data.tradingview.com. Với cách này bạn không biết nhiều về Javascript, còn phần API bạn có thể code bằng bất kỳ ngôn ngữ nào, miễn đảm bảo đúng chuẩn.
  • C2: Bạn sử dụng DataFeed API. Một tập hợp các phương thức theo chuẩn được triển khai trong Javascript.

Tìm hiểu các API cần sử dụng trong dữ liệu Demo của TradingView

C1: Tự xây dựng 1 API theo đúng chuẩn UDF

Chuẩn UDF đã được nói rất rõ trong tài liệu, bạn chỉ cần cài đặt theo là được. Chúng ta cần sử dụng thư viện UDFCompatibleDatafeed để hỗ trợ kết nối tới API. Hình dưới là cách khởi tạo để sử dụng API này:

Tích hợp UDF vào biểu đồ TradingView
Tích hợp UDF vào biểu đồ TradingView

Tôi đã thử kiểm tra các API này trên link dữ liệu demo. Dưới đây là một số link và dữ liệu trả về:

https://demo-feed-data.tradingview.com/config

{
	"supports_search": true,
	"supports_group_request": false,
	"supports_marks": true,
	"supports_timescale_marks": true,
	"supports_time": true,
	"exchanges": [
		{
			"value": "",
			"name": "All Exchanges",
			"desc": ""
		},
		{
			"value": "NasdaqNM",
			"name": "NasdaqNM",
			"desc": "NasdaqNM"
		},
		{
			"value": "NYSE",
			"name": "NYSE",
			"desc": "NYSE"
		},
		{
			"value": "NCM",
			"name": "NCM",
			"desc": "NCM"
		},
		{
			"value": "NGM",
			"name": "NGM",
			"desc": "NGM"
		}
	],
	"symbols_types": [
		{
			"name": "All types",
			"value": ""
		},
		{
			"name": "Stock",
			"value": "stock"
		},
		{
			"name": "Index",
			"value": "index"
		}
	],
	"supported_resolutions": [
		"D",
		"2D",
		"3D",
		"W",
		"3W",
		"M",
		"6M"
	]
}

https://demo-feed-data.tradingview.com/time

1685009148

https://demo-feed-data.tradingview.com/symbols?symbol=AAPL

{
	"name": "AAPL",
	"exchange-traded": "NasdaqNM",
	"exchange-listed": "NasdaqNM",
	"timezone": "America/New_York",
	"minmov": 1,
	"minmov2": 0,
	"pointvalue": 1,
	"session": "0930-1630",
	"has_intraday": false,
	"has_no_volume": false,
	"description": "Apple Inc.",
	"type": "stock",
	"supported_resolutions": [
		"D",
		"2D",
		"3D",
		"W",
		"3W",
		"M",
		"6M"
	],
	"pricescale": 100,
	"ticker": "AAPL"
}

https://demo-feed-data.tradingview.com/history?symbol=AAPL&resolution=1D&from=1645228800&to=1685059200&countback=10

{
	"t": [
		1520985600,
		1521072000,
		1521158400,
		1521417600,
		1521504000,
		1521590400,
		1521676800,
		1521763200,
		1522022400,
		1522108800
	],
	"o": [
		180.32,
		178.5,
		178.65,
		177.32,
		175.24,
		175.04,
		170,
		168.39,
		168.07,
		173.68
	],
	"h": [
		180.52,
		180.24,
		179.12,
		177.47,
		176.8,
		175.09,
		172.68,
		169.92,
		173.1,
		175.15
	],
	"l": [
		177.81,
		178.0701,
		177.62,
		173.66,
		174.94,
		171.26,
		168.6,
		164.94,
		166.44,
		166.92
	],
	"c": [
		178.44,
		178.65,
		178.02,
		175.3,
		175.24,
		171.27,
		168.845,
		164.94,
		172.77,
		168.34
	],
	"v": [
		29075469,
		22584565,
		36836456,
		32804695,
		19314039,
		35247358,
		41051076,
		40248954,
		36272617,
		38962839
	],
	"s": "ok"
}

https://demo-feed-data.tradingview.com/marks?symbol=AAPL&from=1484317800&to=2114355600&resolution=1D

{
	"id": [
		0,
		1,
		2,
		3,
		4,
		5
	],
	"time": [
		1522108800,
		1521763200,
		1521504000,
		1521504000,
		1520812800,
		1519516800
	],
	"color": [
		"red",
		"blue",
		"green",
		"red",
		"blue",
		"green"
	],
	"text": [
		"Red",
		"Blue",
		"Green + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
		"Red again",
		"Blue",
		"Green"
	],
	"label": [
		"A",
		"B",
		"CORE",
		"D",
		"EURO",
		"F"
	],
	"labelFontColor": [
		"white",
		"white",
		"red",
		"#FFFFFF",
		"white",
		"#000"
	],
	"minSize": [
		14,
		28,
		7,
		40,
		7,
		14
	]
}

https://demo-feed-data.tradingview.com/timescale_marks?symbol=AAPL&from=1484317800&to=2114355600&resolution=1D

[
	{
		"id": "tsm1",
		"time": 1522108800,
		"color": "#F23645",
		"label": "A",
		"tooltip": ""
	},
	{
		"id": "tsm2",
		"time": 1521763200,
		"color": "#2962FF",
		"label": "D",
		"tooltip": [
			"Dividends: $0.56",
			"Date: Fri Mar 23 2018"
		]
	},
	{
		"id": "tsm3",
		"time": 1521504000,
		"color": "#089981",
		"label": "D",
		"tooltip": [
			"Dividends: $3.46",
			"Date: Tue Mar 20 2018"
		]
	},
	{
		"id": "tsm4",
		"time": 1520812800,
		"color": "#F23645",
		"label": "E",
		"tooltip": [
			"Earnings: $3.44",
			"Estimate: $3.60"
		],
		"shape": "earningDown"
	},
	{
		"id": "tsm7",
		"time": 1519516800,
		"color": "#089981",
		"label": "E",
		"tooltip": [
			"Earnings: $5.40",
			"Estimate: $5.00"
		],
		"shape": "earningUp"
	},
	{
		"id": "tsm8",
		"time": 1519516800,
		"color": "#FF9800",
		"label": "S",
		"tooltip": [
			"Split: 4/1",
			"Date: Sun Feb 25 2018"
		]
	}
]

https://demo-feed-data.tradingview.com/search?limit=30&query=X&type=&exchange=

[
	{
		"symbol": "XOM",
		"full_name": "XOM",
		"description": "Exxon Mobil Corporation",
		"exchange": "NYSE",
		"type": "stock"
	},
	{
		"symbol": "AXP",
		"full_name": "AXP",
		"description": "American Express Company",
		"exchange": "NYSE",
		"type": "stock"
	},
	{
		"symbol": "EXC",
		"full_name": "EXC",
		"description": "Exelon Corporation",
		"exchange": "NYSE",
		"type": "stock"
	},
	{
		"symbol": "EXPE",
		"full_name": "EXPE",
		"description": "Expedia Inc.",
		"exchange": "NasdaqNM",
		"type": "stock"
	},
	{
		"symbol": "ALXN",
		"full_name": "ALXN",
		"description": "Alexion Pharmaceuticals, Inc.",
		"exchange": "NasdaqNM",
		"type": "stock"
	},
	{
		"symbol": "AUXL",
		"full_name": "AUXL",
		"description": "Auxilium Pharmaceuticals Inc.",
		"exchange": "NasdaqNM",
		"type": "stock"
	},
	{
		"symbol": "BAX",
		"full_name": "BAX",
		"description": "Baxter International Inc.",
		"exchange": "NYSE",
		"type": "stock"
	},
	{
		"symbol": "EBIX",
		"full_name": "EBIX",
		"description": "Ebix Inc.",
		"exchange": "NasdaqNM",
		"type": "stock"
	},
	{
		"symbol": "ESRX",
		"full_name": "ESRX",
		"description": "Express Scripts Holding Company",
		"exchange": "NasdaqNM",
		"type": "stock"
	},
	{
		"symbol": "KERX",
		"full_name": "KERX",
		"description": "Keryx Biopharmaceuticals Inc.",
		"exchange": "NCM",
		"type": "stock"
	}
]

C2: Bạn sử dụng DataFeed API

Để kết nối được dữ liệu bạn phải tạo đối tượng với interface xác định theo mô tả trong Charting Library methods. Chi tiết cài đặt Datafeed bạn xem tại: Implement datafeed. Bài viết này hướng dẫn từng bước tạo Datafeed lấy dữ liệu từ CryptoCompare API

Nói một cách đơn giản, trên Javascript bạn phải cài đặt một đối tượng có các interface như sau:

{
    onReady: (callback) => {
        console.log('[onReady]: Method call');
    },
    searchSymbols: (userInput, exchange, symbolType, onResultReadyCallback) => {
        console.log('[searchSymbols]: Method call');
    },
    resolveSymbol: (symbolName, onSymbolResolvedCallback, onResolveErrorCallback, extension) => {
        console.log('[resolveSymbol]: Method call', symbolName);
    },
    getBars: (symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) => {
        console.log('[getBars]: Method call', symbolInfo);
    },
    subscribeBars: (symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) => {
        console.log('[subscribeBars]: Method call with subscriberUID:', subscriberUID);
    },
    unsubscribeBars: (subscriberUID) => {
        console.log('[unsubscribeBars]: Method call with subscriberUID:', subscriberUID);
    },
};

Xử lý như thế nào trong interface này hoàn toàn là do bạn, bạn có thể lấy dữ liệu từ server của bạn hoặc lấy dữ liệu từ một đơn vị cung cấp dữ liệu nào đó. Sau đó bạn chỉ cần chuẩn hóa lại nó để đảm bảo interface trên.

Bài viết này có hữu ích với bạn?

Kích vào một biểu tượng ngôi sao để đánh giá bài viết!

Xếp hạng trung bình 5 / 5. Số phiếu: 91

Bài viết chưa có đánh giá! Hãy là người đầu tiên đánh giá bài viết này.

Trả lời

Giao diện bởi Anders Norén