График движения биткоин в реальном времени

Биткойн в будущем заменит традиционную фиатную валюту, говорят многие крипто-энтузиасты. Ну, это факт, который становится все более фантастическим, особенно после прошлого года, когда цены на биткойн астрономически выросли и потенциально достигли отметки в 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+ управляемых данными карт, чтобы сделать ваши информационные панели и отчеты более проницательными

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