Last active
December 13, 2020 14:43
-
-
Save stephenlb/7b8c62dd3ca57fab2482a2a6bee82a70 to your computer and use it in GitHub Desktop.
Realtime Ticker Price Changes for Ethereum, Bitcoin and Litecoin.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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