Build a Cryptocurrency Price Tracker in 5 Minutes

With the explosion of Bitcoin, Ethereum, and LiteCoin, and new cryptocurrencies being introduced by the day, we wanted to build a simple dashboard to track the pricing updates in realtime and provide a historical view of changes. In this case, we’ll track Bitcoin, Ethereum, and LiteCoin.

For this project, we used:

• PubNub JavaScript SDK (Publisher)
• EON SDK (Dashboard)
• CryptoCompare (Price API)

The application includes two HTML files, a publisher and subscriber. In this case, our publisher (you) will stream the pricing updates to the subscribers (theoretically any number of users who are looking at the dashboard) in realtime.

Running the Demo

To run the demo, open both the publisher and the subscriber HTML files. Plug in your pub/sub keys, and the publisher will begin streaming pricing data to your subscriber. You’ll need to sign up for a PubNub account to get your unique pub/sub keys. Worry not, PubNub offers a generous sandbox tier that’s free forever up to 100 daily active devices.

The demo is set to publish new pricing data every 10 seconds, but you can easily adjust that on the publisher side.

Publisher

We’ll start by building the publisher. First, you’ll need to create a PubNub object and XHR object to make calls to the pricing API.

var pubnub = new PubNub({
    publishKey:   'YOUR_KEYS_HERE',
    subscribeKey: 'YOUR_KEYS_HERE'
  });
var xhr = new XMLHttpRequest();

Next, we will need to add in the processRequest method for the XHR requests we are going to make. This method will take the response from CryptoCompare and then publish the individual pricing data to each channel. Because there will be three different charts, one for each currency, we will be publishing to PubNub on three different channels.

function processRequest(e) {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
        pubnub.publish({
          channel: 'bitcoin-feed',
          message: {
            eon: {
              'BitCoin': response.BTC.USD.toFixed(2)
            }
          }
        });
        pubnub.publish({
          channel: 'ether-feed',
          message: {
            eon: {
              'Ether': response.ETH.USD.toFixed(2)
            }
          }
        });
        pubnub.publish({
          channel: 'litecoin-feed',
          message: {
            eon: {
              'LiteCoin': response.LTC.USD.toFixed(2)
            }
          }
        });
    }
}

Now, let’s create our main function that will call the CryptoCompare API every 10 seconds to get the current prices for our currency. This request is for BitCoin, Ethereum, and LiteCoin and will be in USD. If you need additional currencies or another denomination, check out the documentation here.

function mainApp() {
  setInterval(function(){
    xhr.open('GET', 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=USD', true)
    xhr.send();
    xhr.onreadystatechange = processRequest;
  }, 10000)
};
mainApp();

Subscriber

Now that we have our publisher who sends the pricing updates, we need a subscriber to receive them. We’ll use EON, an open source framework for building realtime charts and graphs to build our interface. You’ll need to include them in the head of your page.

<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>

Now we need to add divs to our page for EON to render our graphs. At the top of the body is where you’ll will add them.

<div id="bitcoinChart"></div>
<div id="etherChart"></div>
<div id="liteCoinChart"></div>

Next up we will need to initialize the PubNub object that we are going to pass into our EON graphs. Because the dashboard only needs to receive data and won’t be publishing, we will create the PubNub client with only a subscribe key.

var pubnub = new PubNub({
    subscribeKey: 'YOUR_KEY_HERE'
});

Now we’re going to setup some variables to control how our charts look and act.

var pointLimit = 15; //Total amount of points on your graph.
var topPadding = 100; // Additional room between the top most point and the top of the chart
var bottomPadding = 100; // Additional room for the bottom of the graph
var eonData = {labels: true,type: 'line'}; // flag for rendering labels with the point and the type of line that will be rendered
var eonAxis = {y: {padding: {top:topPadding, bottom:bottomPadding}},
               x: {type: 'timeseries',tick: {format: '%H:%M:%S'}}}; // Formatting the time stamps along the bottom of the graphs.

Now let’s create the graphs!

We will initialize 3 different EON charts and pass in our configuration properties we created. The graphs will share config properties and PubNub client, but each will be subscribed to the unique channels we created earlier.

eon.chart({
  channels: ['bitcoin-feed'],
  history: true,
  flow: true,
  limit: pointLimit,
  pubnub: pubnub,
  generate: {
    bindto: '#bitcoinChart',
    data: eonData,
    axis: eonAxis
  }
});
// Create the Ether Chart for BitCoin and bind its div
eon.chart({
  channels: ['ether-feed'],
  history: true,
  flow: true,
  limit: pointLimit,
  pubnub: pubnub,
  generate: {
    bindto: '#etherChart',
    data: eonData,
    axis: eonAxis
  }
});
// Create the LiteCoin Chart for BitCoin and bind its div
eon.chart({
  channels: ['litecoin-feed'],
  history: true,
  flow: true,
  limit: pointLimit,
  pubnub: pubnub,
  generate: {
    bindto: '#liteCoinChart',
    data: eonData,
    axis: eonAxis
  }
});

Now we have a dashboard to watch the current prices of BitCoin, Ethereum, and LiteCoin! Once in production, for security sakes, you’ll want to enable Access Manager on your keyset and secure your publish keys so no one else can publish faulty data to your dashboard.

And you can check out our PubNub + Cryptocurrency overview for more on how we work with exchanges and trading infrastructures.