Build a Bitcoin Price Tracking Chart in Minutes

With so many streams of data available through easy-to-consume APIs, it’s equally easy to visualize the data as it changes. In this tutorial, we’ll build a simple dashboard to track pricing updates for Bitcoin, and provide a historical view of the changes.

For this project, we used:

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

Live demo here!

Running the Demo

There are two ways to run the demo. The first is to open our put-together version and see the action live right away.

The other option is to 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 the bitcoin-feed channel.

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

Now, we’ll need to create our main function to call the CryptoCompare API every 10 seconds to fetch the current price of Bitcoin (converted into USD).

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

Subscriber

We now have our publisher to send the pricing updates. Now we need a subscriber to receive them and do something with it. 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 src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>

Now we need to add a div to our page for EON to render our graph.

At the top of the body is where you’ll will add them:

<div id="bitcoinChart"></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 graph!

We will initialize our EON chart and pass in our configuration properties we created. The graph will share config properties and PubNub client, but is subscribed to the unique channel we created earlier.

eon.chart({
channels: ['bitcoin-feed'],
history: true,
flow: true,
limit: pointLimit,
pubnub: pubnub,
generate: {
bindto: '#bitcoinChart',
data: eonData,
axis: eonAxis
}
});

Styling Your Chart

All style configs for EON are in the C3 reference. You can easily change the color of the lines, thickness, labels, axes, and everything in between! In this case, I changed the color of our line and added some padding.

// EON Charts configuration
var pointLimit = 15;
var topPadding = 100;
var bottomPadding = 100;
var eonData = {labels: true,type: 'line',
colors: {
BitCoin: '#ff6a00',
},
};

Wrapping Up

Now we have a dashboard to watch the current prices of BitCoin! 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.

From maps, to dashboards, to games, you explore some other realtime update use cases with PubNub.