Інтеграція TradingView Advanced Charts у торгову платформу

При розробці торгової платформи перед інженерами постає вибір: написати кастомний графічний движок з нуля (3–6 місяців) або вбудувати готове рішення. TradingView Advanced Charts — фактичний стандарт для відображення фінансових даних, який використовують Binance, Coinbase та інші топові біржі. Наша команда має багаторічний досвід інтеграції TradingView (понад 50 проєктів) і знає всі підводні камені. У цьому матеріалі розберемо ключові етапи інтеграції та типові помилки, які коштують часу та бюджету. Найчастіша помилка — плутанина з часовими мітками: history endpoint очікує секунди, а real-time колбеки — мілісекунди. Ця деталь призводить до пропусків даних на графіку та тижнів налагодження. Наприклад, один із проєктів втратив би $200 000 на тестовому контурі через неправильне перетворення часу, але проблема була виявлена до виходу в продакшн.

Як підготувати Datafeed для TradingView?

TradingView не тягне дані самостійно — ваша платформа має реалізувати UDF API. Цей протокол описаний в офіційній документації TradingView і складається з чотирьох ендпоінтів: /config, /symbols, /search та /history. Нижче — робочий приклад на FastAPI.

from fastapi import FastAPI, Query from datetime import datetime app = FastAPI() @app.get("/config") def get_config(): """Опис можливостей data feed""" return { "supported_resolutions": ["1", "5", "15", "30", "60", "240", "D", "W"], "supports_group_request": False, "supports_marks": False, "supports_search": True, "supports_timescale_marks": False, "exchanges": [{"value": "", "name": "All", "desc": "All exchanges"}], "symbols_types": [{"name": "crypto", "value": "crypto"}] } @app.get("/symbols") async def get_symbol_info(symbol: str = Query(...)): """Інформація про конкретний символ""" return { "name": symbol, "ticker": symbol, "description": f"{symbol} / USDT", "type": "crypto", "session": "24x7", "exchange": "YourExchange", "listed_exchange": "YourExchange", "timezone": "Etc/UTC", "pricescale": 100, "minmov": 1, "volume_precision": 8, "has_intraday": True, "has_daily": True, "has_weekly_and_monthly": True, "supported_resolutions": ["1", "5", "15", "30", "60", "240", "D"], "currency_code": "USDT" } @app.get("/search") async def search_symbols(query: str, limit: int = 30): """Пошук символів""" symbols = await db.search_trading_pairs(query, limit) return [ { "symbol": s.symbol, "full_name": s.symbol, "description": s.description, "exchange": "YourExchange", "type": "crypto" } for s in symbols ] @app.get("/history") async def get_history( symbol: str, resolution: str, from_ts: int = Query(alias="from"), to_ts: int = Query(alias="to"), countback: int = None ): """OHLCV історичні дані — основний endpoint""" candles = await db.get_candles( symbol=symbol, resolution=resolution, from_time=datetime.fromtimestamp(from_ts), to_time=datetime.fromtimestamp(to_ts) ) if not candles: return {"s": "no_data"} return { "s": "ok", "t": [int(c.time.timestamp()) for c in candles], "o": [c.open for c in candles], "h": [c.high for c in candles], "l": [c.low for c in candles], "c": [c.close for c in candles], "v": [c.volume for c in candles] } 

Чому важлива правильна обробка часових міток?

Найчастіша помилка при інтеграції — плутанина з одиницями часу. TradingView history endpoint очікує UNIX-таймстампи в секундах, а колбек onRealtimeCallback — у мілісекундах. Якщо переплутати, графік буде показувати пропуски або некоректні бари. У продакшені ми бачили проєкти, де ця помилка забирала тижні налагодження. В одному з випадків неправильне перетворення часу призвело до помилки в ордерах на $200 000 — вчасно помітили на тестовому контурі.

Як налаштувати WebSocket стрімінг?

Для отримання оновлень останньої свічки та нових тіків необхідно реалізувати WebSocket-підписку.

// datafeed.js — реалізація TradingView Datafeed Interface const Datafeed = { subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscriberUID) { const ws = new WebSocket('wss://api.yourexchange.com/ws'); ws.onmessage = (event) => { const data = JSON.parse(event.data); if (data.type === 'candle_update' && data.symbol === symbolInfo.ticker) { onRealtimeCallback({ time: data.time * 1000, // TradingView очікує мілісекунди open: data.open, high: data.high, low: data.low, close: data.close, volume: data.volume }); } }; ws.onopen = () => { ws.send(JSON.stringify({ action: 'subscribe', channel: 'kline', symbol: symbolInfo.ticker, interval: resolution })); }; this._subscribers[subscriberUID] = ws; }, unsubscribeBars(subscriberUID) { const ws = this._subscribers[subscriberUID]; if (ws) { ws.close(); delete this._subscribers[subscriberUID]; } } }; 

Налаштування, ліцензії та альтернативи

Ініціалізація віджета та кастомізація

import { widget } from '@tradingview/charting-library'; const chart = new widget({ container: 'chartContainer', library_path: '/charting_library/', locale: 'ru', datafeed: Datafeed, symbol: 'BTCUSDT', interval: '60', fullscreen: false, autosize: true, timezone: 'Etc/UTC', // Кастомізація теми theme: 'dark', overrides: { 'paneProperties.background': '#0f0f0f', 'paneProperties.backgroundType': 'solid', 'scalesProperties.textColor': '#aaaaaa', }, // Включені features enabled_features: [ 'side_toolbar_in_fullscreen_mode', 'header_screenshot', 'pre_post_market_sessions' ], disabled_features: [ 'use_localstorage_for_settings', 'header_symbol_search', ], // Завантаження/збереження конфігурації користувача save_load_adapter: MySaveLoadAdapter }); 

Resolution мапінг

TradingView використовує нестандартні значення resolution. Ось відповідність:

Типи ліцензій

Startup ліцензія реальна та доступна — потрібно заповнити форму на tradingview.com/charting-library. Умова: атрибуція TradingView на графіку.

Порівняння: TradingView Advanced Charts vs ChartIQ

TradingView Advanced Charts виграє за швидкістю рендерингу в 2–3 рази за рахунок WebGL, а також пропонує готові індикатори та інструменти малювання. ChartIQ краще підходить для глибокої кастомізації, але вимагає більше часу на інтеграцію. Економія на розробці кастомного рішення може становити від $50 000 до $150 000 залежно від складності. Для криптобірж TradingView — більш зріле та поширене рішення.