JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://coinmarketcap.com/static/js/vendor/flot/jquery.flot.min.js"></script>
<script src="http://coinmarketcap.com/static/js/vendor/flot/jquery.flot.time.min.js"></script>
<div id="plot" style="width: 1100px; height: 300px; padding: 0px; position: relative;"></div>
JavaScript
var PROXY_URL = 'https://jsonp.nodejitsu.com/?callback=?&url=';
var CMC_API_URL_PREFIX = 'http://coinmarketcap.com/static/generated_pages/currencies/datapoints/';
var CMC_API_URL_SUFFIX = '-90d.json';
var data = {
'btc': {
'CMC_name': 'bitcoin',
'data': {}
},
'bts': {
'CMC_name': 'bitshares-x',
'data': {}
},
'nxt': {
'CMC_name': 'nxt',
'data': {}
}
};
function uBTCFormatter(v, axis) {
var val = v * 1000000;
return val.toLocaleString() + " µBTC";
}
function whenDataIsReady(cont) {
var options = {
xaxis: {
mode: "time",
timeformat: "%b %d"
},
yaxis: {
tickFormatter: uBTCFormatter,
ticks: 5
},
legend: {
position: "ne"
},
};
$.plot($("#plot"), [{
label: "BTS Price",
data: data.bts.data.price_btc_data
}, {
label: "NXT Price",
data: data.nxt.data.price_btc_data
}], options);
}
var getData = function (coin) {
return $.getJSON(PROXY_URL + CMC_API_URL_PREFIX + coin.CMC_name + CMC_API_URL_SUFFIX)
.then(function (data) {
console.log('Got data for ' + coin.CMC_name);
coin.data = data;
});
};
$.when(getData(data.btc), getData(data.bts), getData(data.nxt)).then(whenDataIsReady);