JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//coinmarketcap.com/static/js/vendor/flot/jquery.flot.min.js"></script>
<script src="//coinmarketcap.com/static/js/vendor/flot/jquery.flot.time.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<p>Start Date:
<input type="text" placeholder="Choose start date" id="datepicker" />
<input type="button" value="Reset" onclick="onReset()" />
</p>
<p>Vertical axis of plot shows the change in an asset's market cap relative to the market cap of the asset at the start date. All market caps are priced in BTC.</p>
<div id="plot" style="width: 700px; height: 400px; 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 = '-180d.json';
var data = {
btc: {
CMC_name: 'bitcoin',
supply: 13500000,
data: {}
},
bts: {
CMC_name: 'bitshares-x',
supply: 2000000000,
data: {}
},
nxt: {
CMC_name: 'nxt',
supply: 10000000000,
data: {}
}
};
var minStartTime = 0;
var maxStartTime = 0;
function uBTCFormatter(v, axis) {
var val = v * 1000000;
return val.toLocaleString() + " µBTC";
}
function BTCFormatter(v, axis) {
return v.toLocaleString() + " BTC";
}
function onReset() {
var startDate = new Date($("#datepicker").val());
var startTime = startDate.getTime();
if (isNaN(startTime) || startTime < minStartTime) {
startTime = minStartTime;
} else if (startTime > maxStartTime) {
startTime = maxStartTime;
}
resetDate(startTime);
var bts_data = [];
var nxt_data = [];
var bts_marketcap_at_start = null;
var nxt_marketcap_at_start = null;
for (i = 0; i < data.bts.data.price_btc_data.length; i++) {
if (bts_marketcap_at_start == null && data.bts.data.price_btc_data[i][0] < startTime)
continue;
else if (bts_marketcap_at_start == null)
bts_marketcap_at_start = data.bts.data.price_btc_data[i][1] * data.bts.supply;
bts_data.push([data.bts.data.price_btc_data[i][0], data.bts.data.price_btc_data[i][1] * data.bts.supply / bts_marketcap_at_start]);
}
for (i = 0; i < data.nxt.data.price_btc_data.length; i++) {
if (nxt_marketcap_at_start == null && data.nxt.data.price_btc_data[i][0] < startTime)
continue;
else if (nxt_marketcap_at_start == null)
nxt_marketcap_at_start = data.nxt.data.price_btc_data[i][1] * data.nxt.supply;
...