Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Realtime Ticker Price Changes for Ethereum, Bitcoin and Litecoin.
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Prices</title>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.18.0.min.js"></script>
<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"/>
</head>
<body>
<div id="bitcoinChart"></div>
<div id="etherChart"></div>
<div id="liteCoinChart"></div>
<script>
var pubnub = new PubNub({
publishKey: 'demo', // replace with your own pub-key
subscribeKey: 'demo' // replace with your own sub-key
});
var xhr = new XMLHttpRequest();
var pointLimit = 100;
var useLabels = false;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
pubnub.publish({
channel: 'bitcoin-eon',
message: {
eon: {
'BitCoin': response.BTC.USD.toFixed(2)
}
}
});
pubnub.publish({
channel: 'ether-eon',
message: {
eon: {
'Ether': response.ETH.USD.toFixed(2)
}
}
});
pubnub.publish({
channel: 'litecoin-eon',
message: {
eon: {
'LiteCoin': response.LTC.USD.toFixed(2)
}
}
});
//var notification = new Notification("Hi there!");
}
}
eon.chart({
channels: ['bitcoin-eon'],
history: true,
flow: true,
limit: pointLimit,
pubnub: pubnub,
generate: {
bindto: '#bitcoinChart',
data: {
labels: useLabels,
type: 'spline'
},
axis: {
y: {
padding: {top:200, bottom:100}
}
}
}
});
eon.chart({
channels: ['ether-eon'],
history: true,
flow: true,
limit: pointLimit,
pubnub: pubnub,
generate: {
bindto: '#etherChart',
data: {
labels: useLabels,
type: 'spline'
},
axis: {
y: {
padding: {top:200, bottom:100}
}
}
}
});
eon.chart({
channels: ['litecoin-eon'],
history: true,
flow: true,
limit: pointLimit,
pubnub: pubnub,
generate: {
bindto: '#liteCoinChart',
data: {
labels: useLabels,
type: 'spline'
},
axis: {
y: {
padding: {top:200, bottom:100}
}
}
}
});
function mainApp() {
if (Notification.permission !== "denied") {
Notification.requestPermission(function (permission) {});
}
setInterval(function(){
xhr.open('GET', 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=USD', true)
xhr.send();
xhr.onreadystatechange = processRequest;
}, 5000)
};
mainApp();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.