Мониторинг биткоина в реальном времени

Биткойн в будущем заменит традиционную фиатную валюту. Говорят многие крипто-энтузиасты. Ну, это факт. Который становится все более фантастическим. Особенно после прошлого года. Когда цены на биткойн астрономически выросли и потенциально достигли отметки в 20 000 долларов. В то время как весь мир надеялся. Что биткойн вырастет и стабилизируется. На самом деле валюта упала и остается нестабильной.

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

Мы построили панель мониторинга биткойн-тикера в режиме реального времени. Этот учебник дает пошаговое руководство о том. Как создать эту мини-панель мониторинга . Используя JavaScript, Bitcoin API и FusionCharts.

Проверьте Биткойн тикер Live Dashboard здесь

3 ключевых показателя эффективности на вершине демонстрируют в реальном времени значения лучших криптовалют. Таких как Биткоин. Лайткоин и Эфириум. Эта линия-график под KPI демонстрируют Биткойн тикер. Где фиксируются изменения в ценах биткойнов. Ось x обозначает изменение метки времени. А ось y указывает цены биткойна в $.

Включая Зависимости

Прежде чем мы начнем. Нам нужно настроить следующие зависимости:

  1. FusionCharts Core JS Files (Ссылка для скачивания).
  2. Cryptonator API

Примечание : включите основные JS-файлы (внутри тега). Загруженные как часть пакета FusionCharts. В HTML-файл:

 

Включение и инициализация API Cryptonator

Источник данных API Cryptonator определяется в верхней части тега скрипта. API возвращает дамп JSON. Который мы преобразовали в объект JavaScript “data” (переданный этой функции в качестве аргумента).

Ниже приведен URL–адрес API. Который будет извлекать данные в реальном времени для биткойн-тикера:

https://api.cryptonator.com/api/ticker/btc-usd

Перейдите к запрошенному URL-адресу. И возвращаемые значения должны быть видны в браузере. Кроме того, замените btc-usd кодами валют. Такими как eth-usd, ltc-usd. Чтобы получить значения Ethereum и Litecoin.

  • Важно: При использовании API Cryptonator вы можете столкнуться с проблемой CORS. Когда ваш сервер может быть заблокирован после отправки повторных запросов к API. Вы можете узнать больше о проблеме CORS. С которой вы можете столкнуться здесь: http://cors.io/. Одним из быстрых способов обойти проблему CORS является использование AWS Lambda для бессерверной архитектуры или настройка бэкэнд-сервера и выполнение запросов через него.

    Используйте следующий синтаксис для решения проблемы.

const api_url = 'https://cors.io/?https://api.cryptonator.com/api/ticker/';

Давайте перейдем к подробным фрагментам кода. Чтобы лучше понять тикер.

Структура и макет панели мониторинга

Мы использовали Bootstrap 4 здесь. Чтобы построить эту отзывчивую панель управления. С новыми компонентами. Адаптивными структурами и стилями это последовательный фреймворк. Который поддерживает основные из всех браузеров и

исправления совместимости CSS.

Компоненты, присутствующие на странице :

  1. Заголовок Панели Мониторинга
  2. Ценности Криптовалюты
  3. Биткойн-Тикер

Извлечение данных JSON

Объект XMLHttpRequest можно использовать для запроса данных с веб-сервера, а
для отправки запроса на сервер используется метод open() объекта XMLHttpRequest.

open(метод, url, асинхронность)Указывает тип метода запроса
: тип запроса: GET или POST
url: расположение сервера (файла)
async: true (асинхронный) или false (синхронный)

Реализация JS: функции и описания

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

bitcoinDataHandler()Возвращает цену за биткоин.
ethereumDataHandler()Возвращает цену Эфириума.
litecoinDataHandler()Возвращает цену на Лайткоин.
clientDateTime()Возвращает текущую временную метку для графика.
updateData()На диаграмму ссылаются с ее идентификатором, и данные подаются на диаграмму.

Создание контейнера диаграммы

Каждая диаграмма. Отображаемая на веб-странице, отображается в уникальном HTML-
контейнере.

Ниже приведен код для создания контейнера диаграммы:

 

Создание экземпляра диаграммы

График В Реальном Времени

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

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

Чтобы получить доступ к диаграммам данных в реальном времени. Предоставленным FusionCharts. Перейдите к диаграммам в реальном времени.

Чтобы создать диаграмму в реальном времени. Выполните следующие действия:

  • Внутри данных JSON атрибуты и соответствующие им значения могут быть заданы в следующем формате : “”: “”
  • Тип диаграммы задается с помощью атрибута type. Чтобы отобразить линейный график в реальном времени. Установите realtimeline.
  • Объект контейнера устанавливается с помощью атрибута renderAt.
  • Установите refreshinterval на 2, график обновляется каждые 2 секунды.
  • Размер диаграммы задается с помощью атрибутов width и height.
  • Тип данных (JSON/XML). Которые вы хотите передать объекту диаграммы. Определяется с помощью атрибута

    dataFormat.

Поскольку у нас есть данные JSON и контейнер диаграммы на месте. Теперь мы создадим экземпляр FusionCharts. Детали, необходимые для визуализации диаграммы. Такие как тип диаграммы. Идентификатор диаграммы. Размеры диаграммы. Идентификатор HTML-контейнера. Формат данных и т. д.. Будут переданы этому экземпляру диаграммы.

var fusioncharts = new FusionCharts({ id: "stockRealTimeChart". Type: 'realtimeline'. RenderAt: 'chart-container'. Width: '100%'. Height: '350'. DataFormat: 'json', };

Источник данных. Необходимый для отображения диаграммы в реальном времени. Приведен ниже:

dataSource: { "chart": { "caption": "Bitcoin Ticker". "subCaption": "", "xAxisName": "Local Time". "yAxisName": "USD", "numberPrefix": "$", "refreshinterval": "2", "slantLabels": "1", "numdisplaysets": "10", "labeldisplay": "rotate", "showValues": "0", "showRealTimeValue": "0", "theme": "fusion", "yAxisMaxValue": (bitcoinDataHandler().toString() + 20). "yAxisMinValue": (bitcoinDataHandler().toString() - 20), },

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

  • В дополнение к этому. FusionCharts предоставляет возможность регистрировать сообщения в зависимости от определенных предопределенных условий.
  • Используйте метод feedData(strData), предоставленный FusionCharts для подачи данных на диаграмму. Здесь strData-это строковое значение. Которое содержит данные в том же формате. Что и страница поставщика данных в реальном времени. Кроме того, feedData заботится о любой задержке. Которая возникает во время автоматического обновления или при загрузке страницы.
  • updateData() функция строит данные (в формате данных реального времени). Которые должны быть указаны для диаграммы.

    Эта функция вызывается с интервалом JavaScript.

Теперь мы создадим файл bitcoinstyle.css. Который будет содержать все стили и методы CSS для нашей панели мониторинга. Вот как это выглядит:

.navbar-dark { background-color: #4670ad; box-shadow: 0 2px 4px 0 rgba(0,0,0,.04); min-height: 65px; } .logo { color: #FFFFFF; font-weight: 500; text-transform: capitalize; } .card { border-radius: 5px; box-shadow: 0 6px 14px 0 rgba(33,35,68,.1)!important; } .kpi-value { font-weight: 500 !important; }

Рендеринг Диаграммы

Теперь вызовите render()метод для экземпляра диаграммы. Чтобы визуализировать диаграмму. Как показано ниже:

fusioncharts.render();
HTML и JS для компонента Bitcoin перед окончательным рендерингом выглядят следующим образом:
Раздел HTML:-
      
Bitcoin(BTC)
(Price in USD)
Litecoin(LTC)
(Price in USD)
Ethereum
(Price in USD)

JavaScript Section:-

После успешного выполнения кода страница загружается с заголовком панели мониторинга. Значениями криптовалют и тикером биткоина.

Цены на биткойн. Лайткоин и Эфириум (в долларах США) отображаются чуть ниже заголовка панели мониторинга.

Этот биткойн-тикер обновляется с фиксированным интервалом в 2 секунды.

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

Ось y динамически настраивается таким образом. Что даже при любом резком изменении цены ось графика изменяется соответствующим образом.

После того как вы выполнили все шаги в этом руководстве. Ваша конечная панель мониторинга будет выглядеть следующим образом:

Вы можете найти весь исходный код для биткойн-тикера здесь →

Ссылка на исходный код

Вы можете скачать пакет Fusion Charts для Javascript stack отсюда→

зарегистрироваться на Fusion Charts

.

Коллекцию замечательных инструментов и ресурсов CSS можно найти по адресу html-css-js.com: code beautifier, шпаргалка. Генераторы стилей. Полезные ссылки и т. д.

От колонки до пончика и радара до Ганта. FusionCharts предоставляет более 100+ интерактивных диаграмм и 2000+ управляемых данными карт. Чтобы сделать ваши информационные панели и отчеты более проницательными

Исследуйте Фузионные Диаграммы