ToeJamson

var pubnub = new PubNub({
  publishKey:   'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});

ToeJamson

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_MAPS_API_KEY&callback=initialize"></script>

ToeJamson

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>

ToeJamson

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

ToeJamson

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.

ToeJamson

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

ToeJamson

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

ToeJamson

<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"/>

ToeJamson

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

ToeJamson

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