Tradingview как сделать несколько графиков в одном окне

Обновлено: 01.05.2024

Поиск нужных графиков отнимает время и несет много вопросов. Сегодня хочу поделиться своим опытом в выборе финансовых графиков, для экономии вашего времени и сил.

В статье расcмотрю три основных для меня библиотеки, сделаю сравнение и дополню комментариями из личного опыта.

Было необходимо подключить графики к приложению. По итогу пользуюсь 3 вариантами, о которых мы поговорим в статье. Все они бесплатные для коммерческого и не коммерческого использования. Два из них open source lightweight-charts, trading-vue-js (на Vuejs) и один проприетарный сharting_library.

Введение

Каждый график решает свою задачу. Это кажется банальным, при этом переодически наблюдаю картину как из "жигулей" пытаются сделать "спорткар". Начнем с обзора и сравнения.

Библиотеки

lightweight-charts

Суть вытекает из названия. Это легковесные графики, которые решают простые задачи. Библиотека открыта, хорошо документирована и стабильно обновляется. Если требуется быстро собрать графики, визуализировать алгоритм или какие-то данные, то это самый подходящий выбор.

Тот, кто знаком с графиками платформы TradingView увидит лайт-версию классических графиков.

Из "коробки" доступны графики: line, area, бары, свечи и гистограмма. Графики можно комбинировать. Есть возможность выводить сделки, выставлять ордера и много дополнительных настроек. Есть CDN версия и пакет для Nodejs.

сharting_library

Классический график TradingView, которым можно пользоваться бесплатно. Этот вариант используется на большинстве бирж и в самом сервисе TV. Он подходит, если требуется из "коробки" использовать мощный функционал с техническим анализом для своего приложения.

Библиотека закрытая. Получение доступа проходит в несколько этапов:

Заполнение заявки на сайте и ожидание ответа (от двух недель)
Подписание договора
Получение доступа к репозиторию на GitHub

При желании, можно подключить виджет с ограниченными настройками.

Главным минусом является ограниченность API, нельзя масштабировать. С технической стороной возникает много вопросов, поэтому это — тема для отдельной статьи.

сharting_library я использую в своем приложении для торгового терминала. Выглядит "дорого-богато" и знакомо пользователям.

TradingVue

Достаточно молодой проект, на котором делают действительно крутые графики. Визуально они похожи на классический TradingView, с отличиями в лицензии (MIT), полной кастомизацией и простым API. На этих графиках можно рисовать все, что захотите. Высокая скорость обработки данных 20ms для 1000 свечей. Доступен скриптовый язык — JavaScript, есть песочница. Библиотека написана на Vuejs, поэтому тем, кто знаком с фреймворком, все будет понятно.

Минусом является небольшое количество плагинов для расширения функционала. В рамках библиотеки они называются overlays . Доступные расширения tvjs-overlays.

В диалоге с разработчиком получилось узнать, что приоритет в разработке функционала, поэтому пока нет возможности уделить время плагинам. Pull запросы приветствуются.

Заключение

Если вам интересно разобрать техническую сторону и "подводные камни" для charting_library и TradingVue поддержите статью или напишите, что не так.

При наличие опыта использования одной или нескольких библиотек отпишитесь в комментариях, будет интересно узнать ваше мнение :)

Продолжаю делиться удобствами работы с графиками на Trading View.

Расскажу про функционал работы с разным расположением окон и про сравнение графиков методом наложениях их друг на друга.

Расположение графиков

Эта функция доступна в платной версии Trading View.
Как бесплатно пользоваться платной версией я писал тут .
Кстати, сейчас повторное продление может требовать аккаунт в PayPal.

Изменение расположения графиков меняется в верхней панели.

Меню настройки имеет 2 блока:

1. Выбор расположения графиков в окне терминала.
Тут объяснения не нужны, визуально всё понятно.

2. Синхронизация на всех графиках.

Интервал — имеется ввиду тайм-фрейм. Если эта функция включена, то ТФ синхронизируется на всех открытых окнах.

Перекрестие — указатель, которым осуществляется работа на графике синхронизируется на всех открытых окнах.
Очень полезная функция для работы с один инструментом на разных тайм-фреймах, удобно отслеживать нужное событие на разных тайм-фреймах одновременно.

Время — когда вы кликаете на каком-либо графике, все остальные открытые графики будут прокручены до той же самой точки по временной оси.

Сравнение графиков

Ещё одна функция работы с графиками.

Находится также на верхней панели.

Данная функция позволяет наложить любой график на текущий график и отобразить его в виде кривой линии.

Мне не нравится то, что нельзя отображать наложенные графики в виде японских свечей, но в целом кривой линии достаточно, чтобы увидеть корреляцию инструментов.

Ещё довольно скрытная опция при выборе графика, который будет наложен, находится в окне поиска инструмента.

Выбирая инструмент можно сразу указать как он будет отображен на основном графике, для этого нужно навести на нужный инструмент и функции всплывут.

TradingView — это бесплатный мультиплатформенный сервис построения графиков и социальная сеть для трейдеров и инвесторов . Он позволяет пользователям отслеживать графики цен сотен различных активов, включая криптовалюты, а также делиться своими идеями о рынках и обсуждать их.

Платформа предлагает обширный настраиваемый набор технических индикаторов — важный компонент технического анализа, который может предоставить трейдерам столь востребованную степень предсказуемости цен на волатильных криптовалютных рынках.

Что такое TradingView?

Позиционируя себя как своего рода универсальную торговую платформу , TradingView сочетает в себе графики в реальном времени, технические индикаторы, кроссплатформенные предупреждения и социальную сеть ; все они доступны через веб-интерфейс, специальное настольное приложение или приложения для мобильных устройств и планшетов. Он использует эти и многие другие функции для создания среды, которая должна помочь пользователям принимать глубоко обоснованные торговые и инвестиционные решения.

Социальный аспект интегрирован в графики цен. Когда вы открываете диаграмму для какой-либо конкретной криптовалюты или акции, вы можете увидеть на TradingView ленту новостей, относящуюся к этому активу, и общедоступные чаты, предназначенные для сообщества этого актива.

Большинство инструментов TradingView обладают широкими возможностями настройки — примером может служить Pine Script, собственный удобный язык сценариев платформы, который можно использовать для создания новых технических индикаторов с нуля.

Этот акцент на настраиваемости выходит за рамки индикаторов, поскольку большая часть того, что вы увидите на платформе — от шкалы времени и ценовых предупреждений до цвета свечей на графике — может быть адаптирована к конкретным требованиям обычных трейдеров, опытных профессионалов и всех остальных.

Одним из недостатков здесь является то, что доступный набор функций зависит от уровня вашей подписки. Помимо несколько ограниченной бесплатной версии , TradingView предлагает три типа ежемесячных подписок по цене от 14,95 до 59,95 долларов , каждая из которых дает различные типы преимуществ.

Платформа по-прежнему намного более доступна, чем некоторые из ее конкурентов, такие как терминал Bloomberg, который стоит 24 000 долларов в год, но — что, возможно, парадоксально — этот низкий барьер для входа также может быть недостатком в контексте социальной сети TradingView. Торговые идеи, которыми делятся пользователи на платформе более варьируются от блестящих до ужасных. В основном каждый пользователь сам решает, что есть что.

Функция графиков TradingView

Давайте посмотрим на график пары BTC / USD на TradingView и посмотрим, что он предлагает.

Даже в платной версии трайдингвью есть ограничение на количество графиков которые можно отобразить одновременно, на версии Pro например их можно вывести 5-ть. Обычно их нужно больше. Для меня это оказалось важным, когда выводил на график несколько индикаторов SMA, при выводе каждого отдельно лимит быстро достигается.

Простой способ уменьшить это ограничение — воспользоваться редактором Pine и в нём разместить все необходимые индикаторы кучей. Ниже подробней.

Во первых по многим индикаторам достаточно легко посмотреть исходный код. Например для аллигатора Билла Вильямса.

Во вторых это код можно комбинировать и выводить индикаторы не раздельно, а все вместе одновременно в рамках одного скрипта. Добавим индикатор «полосы Боллинджера» и скопируем исходный код ниже строки study в буфер обмена.

Ещё раз вернёмся к редактированию «аллигатора Вильямса». Исправим название скрипта в функции «study» на удобное:

В меню редактирования скрипта выберем «Ещё» (три точки), в нем «Копировать» и введём название нашего скрипта и после сохраним:

Скрипт можно будет найти потом в меню «Открыть / Мой скрипт. »

Вставим из буфера скопированный скрипт ниже предыдущего. Сохраняем и добавляем индикатор на график.

Будет выведено два индикатора на график и при этом использован только один индикатор из лимита.

Какие могут быть сложности:
— у некоторых скриптов код закрыт и такой фокус с ними не проходит.
— переменные в разных индикаторах называются одинаково — для избежания миксования и неверного вывода, лучше добавлять скрипты последовательно, если не хочется переписывать их названия
— тип скрипта study должен быть в начале и его не нужно копировать с других скриптов

Если Вы — фрилансер или CTO финансового проекта, рано или позно Вы столкнетесь с вопросом подключения графиков, я сэкономлю Вам минимум сутки работы. Те, кто уже используют эту библиотеку, возможно, найдут что-то новое.

Статья будет в формате "книги рецептов" с open source решениями для криптовалютной биржи Binance и Forex.

У библиотеки TradingView (charting_library) высокий порог входа, при этом менее популярной она не стала из-за того, что используется на одноименном сервисе TradingView.com. Решил сделать "книгу рецептов" с ответами на основные вопросы.

Контент буду дополнять по мере появляния новых сложностей. Если у Вас есть вопросы и Вы не нашли ответы в статье, пишите в комментариях, будем разбираться вместе :)

В статье буду указывать ссылки на документацию. Если, при переходе по ссылке, у Вас открывается 404 страница, это означает, что у Вас нет доступа.

Лицензия

Можно использовать бесплатно в коммерческих и некоммерческих целях. Самый главный критерий — сохранность логотипа компании на графиках.

При запросе доступа к графикам обязательно указывать конечный домен, где они будут использоваться. При реализации одного из проектов мы подключали Forex-дату к графику, все настроили и запустили. За 2-й месяц заказчик данные Forex не проплатил, из-за этого графики полностью не загружались и отсутствовал логотип. После сложившейся ситуации проверяющий связался с заказчиком последством эл.почты с вопросами для разъяснения ситуации.

Получение доступа

У библиотеки закрытый доступ на GitHub, чтобы его получить необходимо:

Заполнить заявку на сайте
Подписать договор
Получить доступ к репозиторию на GitHub

Мой опыт получения доступа

Спустя примерно 4 недели после заполнения заявки мне прислали договор для подписания. Через 3 дня после подписания открыли доступ к библиотеке. Судя по отзывам, период получения доступа плавает и точных сроков нет.

Не отображается график, даже с тестовыми данными

Для решения нужно подключить виджет и глобально указать доступ к бибилиотеке.

Подключение виджета

Доступ к библиотеке

Указать глобальный путь к папке charting_library в опциях виджета library_path: '/charting_library/'

Глобальный путь будет отличаться от используемых модулей. В моем случае используется Vuejs с указанием в vue.config.js => publicPath: '/' . Структура папок: /public/index.html , /public/charting_library/ и настройки виджета, которые указаны выше.

Подключение данных

В базовом варианте используются тестовые данные. Далее необходимо подключить свой провайдер данных, используя одно из двух решений: JS API или UDF. Напрямую "скормить" массив данных не получится. Мы расмотрим JSAPI, UDF подключается аналогично, с отличием в указании конечной точки на сервере, откуда будет получать данные.

JS API — подключение на стороне клиента
UDF — подключение на серверной части

TradingView JS API adapter

Чтобы настроить адаптер, нужно понимать, что каждый хук выполняется последовательно и для отладки лучше добавить вывод в консоль информации о запуске хука console.log('[]: Method call') .

Последовательность запуска: onReady => resolveSymbol => getBars => subscribeBars => unsubscribeBars.

Если вы меняете таймфрейм, символ, вызывается хук unsubscribeBars, который обращается к вашей функции, которая сбрасывает WebSocket подключение с провайдером данных. Если вы не используете subscribeBars, то и unsubscribeBars вам не нужен. getServerTime хук не обязательный, но если вам требуется использовать время сервера, подключайте его.

Если провайдер данных не отдает объемы, то можете указать в хуке resolveSymbol — has_no_volume: true.

Иногда провайдер данных не позволяет запрашивать данные напрямую с клиента, например биржа Binance, поэтому запрос можно прокидывать через прокси.

TradingView UDF adapter

JS API getBars хук вызывается много раз

Так бывает, когда не хватает данных и библиотека самостоятельно пытается "догрузить" информацию. В хуке getBars есть параметр firstDataRequest, который возвращает булевское значение true\false , используйте его. Возвращает true только при загрузке маркета.

У моего провайдера нет WebSocket подключения

Не обязательно использовать UDF провайдер, если нет стрима. Интервал запросов задать не получится для JS API адаптера, но это не мешает нам добавить setInterval в subscribeBars и отдавать данные для обновления.

Кастомизация дизайна

По умолчанию доступны две темы: theme: "Light" || "Dark" . Также можно использовать собственные цветовые решение. Со временем столкнетесь с проблемой, когда цвета поменялись везде, кроме header_widget (верхний блок с кнопками поиска, сравнения и пр.), его нужно менять через .css.

В опциях виджета нужно указать: custom_css_url: '/tradingview.css' , где / — абсолютный путь от вашего index.html . С контентом:

Сохрание данных

Возможно понадобится сохранять "рисовалки".

Save\Load методы

Самый простой вариант, который можно использовать, если не планируется рисовать много на графиках. Простой, потому что можете вызвать объект со всеми данными графика widget.save(cb => this.setOverlay(cb)) и сохранить там, где будет удобно.

Save\Load adapter

Похож на UDF adapter. На сервере поднимаете конечные точки для сохранения\загрузки данных.

У меня что-то не работает, делаю все по документации

Реальный кейс, обратился фрилансер с проектом, проект был старый, он его переписывал. По итогу просто была старая версия библиотеки. Проверяйте версию.

Другая ситуация, когда пытаются вызвать методы у еще незагруженного графика, отслеживайте состояние через onChartReady. Если нет под капотом реактивности, чтобы отследить загрузку графика, используйте паттерн Observer.

Да, это нормально.

Как добавить ордера на график

После добавления ордера на график, нет доступа массиву, поэтому необходимо самостоятельно отслеживать ордера. Поделюсь своим решением оформленное в формате миксина для Vuejs, суть будет понятна.

Как добавить формы, "рисовалки" на график (линия, фигуры и пр.)

Добавлять можно исключительно предложенные библитекой формы, которые используются в тулбаре. Это необходимо, когда нужно вывести информацию на график.

Хочу использовать PineScript

charting_library не поддерживает такой функционал. PineScript можно переписать на JavaScript и использовать алгоритм на клиентской или серверной части.

Хочу добавить свой индикатор

Посмотрите в сторону Custom Studies

Хочу использовать несколько графиков в одном окне

В бесплатной версии charting_library такой функционал отсутствует. При необходимости можно своими силами это сделать HTML+CSS.

— подключенная биржа Binance c JS API адаптером и WebSocket стримом — данные Forex для JS API адаптера. Ежеминутное обновлением данных без WebSocket с Save\Load методами

Статья будет дополняться. Если есть кейс с проблемой — решением, пишите, дополню статью с указанием авторства.

Читайте также: