Categories: Uncategorized

Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript

Many crypto enthusiasts believe that Bitcoin will eventually replace traditional fiat currency. Well, that’s becoming more of a fantasy, especially after Bitcoin prices skyrocketed to $20,000 last year. While the entire world has been hoping for Bitcoin to rise and stabilize, the currency has actually fallen and remains volatile. As more trading portals and online websites monitor bitcoin price fluctuations, keeping an eye on these real-time changes is critical, especially if you’re a Bitcoin enthusiast who trades cryptocurrencies on a regular basis. We created a bitcoin ticker dashboard that is updated in real-time.

Check out the Bitcoin Ticker Live Dashboard here. The three leading KPIs showcase real-time values of top cryptocurrencies like Bitcoin, Litecoin, and Ethereum. This line-chart below the KPIs demonstrates a Bitcoin Ticker where the variation in bitcoin prices is captured. The x-axis denotes the timestamp variation, and the y-axis indicates bitcoin prices in dollars. In this post, we’ll walk you through the process of creating a real-time Financial Dashboard with JavaScript, the Bitcoin API, and FusionCharts.

Table of Contents

It Accounts for Dependencies

Before we start, we need to set up the following dependencies:

FusionCharts Core JS Files (Download Link).
Cryptonator API

NOTE: Include the core JS files (inside the tag) downloaded as part of the FusionCharts package, in the HTML file:

<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js” ></script>
 <script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js“></script>

It Includes and Initializes Cryptonator API

The Cryptonator API data source is defined at the top of the script tag. The API returns a JSON dump, which we have converted as the JavaScript object “data” (passed on to this function as an argument). Given below is the API URL, this will fetch the real-time data for the Bitcoin Ticker: https://api.cryptonator.com/api/ticker/btc-usd

Navigate to the requested URL, and the values returned should be visible in the browser. Furthermore, replace btc-usd with the currency codes like eth-usd, ltc-usd to fetch the values of Ethereum and Litecoin.

IMPORTANT: You may encounter a CORS issue while using the Cryptonator API, where your server may be blocked after sending repeated requests to the API. You can learn more about the CORS issue you may face here: https://cors.io/. One quick way to bypass the CORS issue is by using AWS Lambda for server-less architecture or setting up a backend server and making requests via it. Use the below syntax to resolve the issue.

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

Let’s get into the detailed code snippets to understand the ticker better.

Dashboard Structure and Layout

We have used Bootstrap 4 here to build this responsive dashboard. With new components, responsive structures, and styles, it is a consistent framework that supports all browsers and CSS compatibility fixes. The components presented on the page are:

Dashboard Header
Cryptocurrency Values
Bitcoin Ticker

Fetching the JSON Data

The XMLHttpRequest object can be used to request data from a web server. To send a request to a server, the open() method of the XMLHttpRequest object is used.

open(method, URL, async)

Specifies the type of request method: the type of request: GET or POST URL: the server (file) location async: true (asynchronous) or false (synchronous)

JS Implementation: Functions and Descriptions

The table below describes the functions and their corresponding outcomes.

`bitcoinDataHandler()`	Returns the price for Bitcoin.
`ethereumDataHandler()`	Returns the price for Ethereum.
`litecoinDataHandler()`	Returns the price for Litecoin.
`clientDateTime()`	Returns the current timestamp for the chart.
`updateData()`	The chart is referenced with its ID, and the data is fed to the chart.

Creating the Chart Container

Every chart displayed on a web page is rendered within a unique HTML container. We will use the <div> element for creating the HTML container for our chart. Given below is the code for creating the chart container:

<body>
<div id=”chart-container”></div>
</body>

Creating the Chart Instance

Real-Time Chart

A real-time line chart is used to show the magnitude of a price in real-time. Data is updated automatically at fixed intervals by getting new data from the server without any page refreshes. Data values plotted on the chart as data points are then connected using line segments. This chart can be simulated as a real-time bitcoin price monitor which updates after a fixed interval of time. To access the Real-Time Data Charts provided by FusionCharts, head to real-time charts. To create a real-time chart, follow the steps given below:

Within the JSON data, the attributes and their corresponding values are set in the format: “”: “”
The chart type is specified using the type attribute. To render a real-time line chart, set realtimeline.
Set the container object using the renderAt attribute.
Set refreshinterval to 2, so the chart gets updated every 2 seconds.
The dimension of the chart is specified using width and height attributes.
The type of data (JSON/XML) you want to pass to the chart object is defined using the dataFormat attribute.

Since we have the JSON data and the chart container in place, we will now create the FusionCharts instance. The details required to render the chart, like the chart type, the chart ID, chart dimensions, the HTML container ID, the data format, and so on, will be passed to this chart instance.

var fusioncharts = new FusionCharts({
     id: "stockRealTimeChart",
     type: 'realtimeline',
     renderAt: 'chart-container',
     width: '100%',
     height: '350',
     dataFormat: 'json',
     };

The data source required to render the real-time chart is given below:

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),
 },

We can customize the functionality of a real-time chart in great detail. For example, we can define refresh interval, update interval, decimal precisions, canvas and chart margins, etc.

In addition to this, FusionCharts provides the ability to log messages depending on certain predefined conditions.
Use the feedData(strData) method provided by FusionCharts to feed data to the chart. Here, strData
is a string value that contains data in the same format as the real-time data provider page. Also, feedData takes care of any delay that occurs during auto-refresh or on page load.
updateData() function builds the data (in the real-time data format) to be specified for the chart. You invoke this function with a JavaScript interval.

We will now create a file called bitcoinstyle.css which will contain all the styles and CSS techniques for our dashboard. Here’s how it looks like:

.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);
}
 
.kpi-value {
    font-weight: 500 ;
}

Rendering The Chart

Now call the render() method for the chart instance to render the chart, as given below:

fusioncharts.render();

The HTML and JS for the Bitcoin component before the final render looks like this:

HTML Section:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bitcoinstyle.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Bitcoin Ticker</title>
<!-- design system files -->
<link rel="stylesheet" href="https://ds.fusioncharts.com/2.0.8/css/ds.css">
<script src="https://ds.fusioncharts.com/2.0.8/js/ds.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
<nav class="navbar navbar-dark">
<h1 class="logo pl-2">Real-Time Cryptocurrency</h1>
</nav>
<div class="container-fluid">
<div class="row text-center mt-4 pl-3 pr-3">
<div class="col-sm">
<div class="card">
<div class="card-body">
<div class="h3">Bitcoin(BTC)</div>
<div class="h5">(Price in USD)</div>
<div id="btc_val" class="h4 kpi-value"></div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body">
<div class="h3">Litecoin(LTC)</div>
<div class="h5">(Price in USD)</div>
<div id="ltc_val" class="h4 kpi-value"></div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body">
<div class="h3">Ethereum</div>
<div class="h5">(Price in USD)</div>
<div id="eth_val" class="h4 kpi-value"></div>
</div>
</div>
</div>
</div>
<div class="row mt-4 pr-3 pl-3">
<div class="col">
<div class="card">
<div class="card-body">
<div id="chart-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript Section:-
<script>
//Fetch the price of Ethereum
const eth_api_url = 'https://api.cryptonator.com/api/ticker/eth-usd';
function ethereumHttpObject() {
try { return new XMLHttpRequest(); }
catch (error) { }
}
function ethereumGetData() {
var request = ethereumHttpObject();
request.open("GET", eth_api_url, false);
request.send(null);
console.log(request.responseText);
return request.responseText;
}
function ethereumDataHandler() {
var raw_data_string = ethereumGetData();
var data = JSON.parse(raw_data_string);
var base = data.ticker.base;
var target = data.ticker.target;
var price = data.ticker.price;
var volume = data.ticker.volume;
var change = data.ticker.change;
var api_server_epoch_timestamp = data.timestamp;
var api_success = data.success;
var api_error = data.error;
return price;
}
document.getElementById("eth_val").innerHTML = "$" + Math.round(ethereumDataHandler());
//Fetch the price of Litecoin
const ltc_api_url = 'https://api.cryptonator.com/api/ticker/ltc-usd';
function litecoinHttpObject() {
try { return new XMLHttpRequest(); }
catch (error) { }
}
function litecoinGetData() {
var request = litecoinHttpObject();
request.open("GET", ltc_api_url, false);
request.send(null);
//console.log(request.responseText);
return request.responseText;
}
function litecoinDataHandler() {
var raw_data_string = litecoinGetData();
var data = JSON.parse(raw_data_string);
var base = data.ticker.base;
var target = data.ticker.target;
var price = data.ticker.price;
var volume = data.ticker.volume;
var change = data.ticker.change;
var api_server_epoch_timestamp = data.timestamp;
var api_success = data.success;
var api_error = data.error;
return price;
}
document.getElementById("ltc_val").innerHTML = "$" + Math.round(litecoinDataHandler());
//Fetch the value of Bitcoin
const api_url = 'https://api.cryptonator.com/api/ticker/btc-usd';
const time_interval = 2;
function addLeadingZero(num) {
return (num <= 9) ? ("0" + num) : num;
}
function clientDateTime() {
var date_time = new Date();
var curr_hour = date_time.getHours();
var zero_added_curr_hour = addLeadingZero(curr_hour);
var curr_min = date_time.getMinutes();
var curr_sec = date_time.getSeconds();
var curr_time = zero_added_curr_hour + ':' + curr_min + ':' + curr_sec;
return curr_time
}
function makeHttpObject() {
try { return new XMLHttpRequest(); }
catch (error) { }
}
function bitcoinGetData() {
var request = makeHttpObject();
request.open("GET", api_url, false);
request.send(null);
return request.responseText;
}
function bitcoinDataHandler() {
var raw_data_string = bitcoinGetData();
var data = JSON.parse(raw_data_string);
var base = data.ticker.base;
var target = data.ticker.target;
var price = data.ticker.price;
var volume = data.ticker.volume;
var change = data.ticker.change;
var api_server_epoch_timestamp = data.timestamp;
var api_success = data.success;
var api_error = data.error;
return price;
}
document.getElementById("btc_val").innerHTML = "$" + Math.round(bitcoinDataHandler());
FusionCharts.ready(function () {
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),
},
"categories": [{
"category": [{
"label": clientDateTime().toString()
}]
}],
"dataset": [{
"data": [{
"value": bitcoinDataHandler().toString()
}]
}]
},
"events": {
"initialized": function (e) {
function updateData() {
// Get reference to the chart using its ID
var chartRef = FusionCharts("stockRealTimeChart"),
x_axis = clientDateTime(),
y_axis = bitcoinDataHandler(),
strData = "&label=" + x_axis + "&value=" + y_axis;
// Feed it to chart.
chartRef.feedData(strData);
}
e.sender.chartInterval = setInterval(function () {
updateData();
}, time_interval * 1000);
},
"disposed": function (evt, arg) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>

After successfully executing the code, the page is loaded with the dashboard header, cryptocurrency values, and the bitcoin ticker. The Bitcoin, Litecoin, and Ethereum prices (in USD) are displayed just below the dashboard header. This Bitcoin Ticker gets updated at a fixed interval of 2 seconds. Hovering on the line chart, the price of bitcoin at that particular timestamp is observable at every tooltip. The y-axis is configured dynamically so that even with any drastic price change, the chart’s axis gets modified accordingly. After you have implemented all the steps in this tutorial, your final dashboard will look like this:

You can find the entire source code for the Bitcoin Ticker here → Source Code Link. You can download Fusion Charts Package for Javascript stack from here→Sign up for Fusion Charts. You can find a collection of great CSS tools and resources at html-css-js.com: code beautifier, cheat sheet, style generators, useful links, etc.

Sowmya Rajan

Next Plot Better Time Series Charts with FusionTime »

Previous « 6 Modern Data Visualization Trends

View Comments

Maricruz says:

April 22, 2021 at 5:22 am

Some trupy good info, Gladiolus I discovered this.
Carey says:

June 25, 2021 at 9:49 am

This web site is mmy inspiration, very superb style and Perfect subject
matter.