Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 3, 2017 02:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/3e44de00180d69dd59ac14eacd5a3afe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/3e44de00180d69dd59ac14eacd5a3afe to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/hadahu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css">
<style>
#chart_container {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
position: relative;
left: 80px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 80px;
}
</style>
</head>
<body>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>
<script id="jsbin-javascript">
//*****
//* Namespace Object
//*****
window.extDiff = {
fakeData: false,
cadPerUsd: '',
cadPerBtc: '',
usdPerBtc: '',
useEpoch: true,
aMultiplier: 1,
bMultiplier: 1,
usdCadRatioData: [],
usdBtcCadBtcRatioData: [],
dataRendered: {a: [], b: []},
scale: undefined,
scaleDomain: [1.2, 2],
scaleRange: [0, 1],
ticks: 10,
// http://fixer.io/
cadPerUsdEndpoint: 'https://api.fixer.io/latest?base=USD&symbols=CAD',
// https://www.quadrigacx.com/api_info
cadPerBtcEndpoint: 'https://api.quadrigacx.com/v2/ticker',
// https://developers.coinbase.com/api/v2#get-buy-price
usdPerBtcEndpoint: 'https://api.coinbase.com/v2/prices/buy',
testData: {
a: [
{
x: 0,
y: 13.04061318627961
},
{
x: 1,
y: 12.9136400322841
},
{
x: 2,
y: 12.910314517236642
}
],
b: [
{
x: 0,
y: 12.782
},
{
x: 1,
y: 12.782
},
{
x: 2,
y: 12.782
}
]
}
};
//*****
//* Functions for Fetching Remote Data
//** Could be cleaned up..
//*****
extDiff.getCadPerUsd = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.cadPerUsd = 1.2;
if(cb) return cb();
}
$.ajax(
self.cadPerUsdEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
//console.log(data);
self.cadPerUsd = parseFloat(data.rates.CAD);
console.log('1USD = ' + self.cadPerUsd + 'CAD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
extDiff.getCadPerBtc = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.cadPerBtc = 500;
if(cb) return cb();
}
$.ajax(
self.cadPerBtcEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
//console.log(data);
self.cadPerBtc = parseFloat(data.bid);
console.log('1BTC = ' + self.cadPerBtc + 'CAD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
extDiff.getUsdPerBtc = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.usdPerBtc = 700;
if(cb) return cb();
}
$.ajax(
self.usdPerBtcEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
self.usdPerBtc = parseFloat(data.data.amount);
console.log('1BTC = ' + self.usdPerBtc + 'USD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
//*****
//* Worker Functions
//*****
extDiff.getRemoteData = function() {
this.getCadPerUsd(
this.getCadPerBtc(
this.getUsdPerBtc(
this.processData()
)
)
)();
};
extDiff.processData = function() {
var self = this;
return function() {
var btcFx = self.usdPerBtc * self.cadPerUsd;
var cadBtcPerUsdBtc = self.cadPerBtc / self.usdPerBtc;
console.info(btcFx + ', ' + cadBtcPerUsdBtc);
self.usdCadRatioData.push(self.cadPerUsd * self.aMultiplier);
self.usdBtcCadBtcRatioData.push(cadBtcPerUsdBtc * self.bMultiplier);
if(self.usdCadRatioData.length !== self.usdBtcCadBtcRatioData.length) {
console.error('The ratio arrays aren\'t equal', self.usdCadRatioData, self.usdBtcCadBtcRatioData);
}
else {
self.updateChart();
}
};
};
//*****
//* Update Functions
//*****
extDiff.updateChart = function() {
var ratioDataLength = this.usdCadRatioData.length;
var dataRenderedLength = this.dataRendered.a.length;
var lastElement = ratioDataLength - 1;
this.append2DataRendered(
this.usdBtcCadBtcRatioData[lastElement],
this.usdCadRatioData[lastElement],
dataRenderedLength
);
console.log(this.dataRendered);
//this.reconfigureGraph();
this.graph.render();
};
extDiff.append2DataRendered = function(a, b, i) {
var x_out = i;
if(this.useEpoch) {
x_out = Math.floor((new Date()).getTime() / 1000);
}
this.dataRendered.a.push(
{
x: x_out,
y: a
}
);
this.dataRendered.b.push(
{
x: x_out,
y: b
}
);
};
//*****
//* Initialization Functions
//*****
extDiff.init = function() {
this.initGraph();
this.getRemoteData();
var intervalReg = setInterval(
function() {
extDiff.getRemoteData();
},
10000
);
};
extDiff.initGraph = function(){
var self = this;
if(self.useTestData) {
self.dataRendered = self.testData;
}
Rickshaw.Fixtures.Number.Currency = {};
Rickshaw.Fixtures.Number.Currency.Btc = function(y) {
var abs_y = Math.abs(y);
if (abs_y >= 1000000000000) { return y / 1000000000000 + " TBTC"; }
else if (abs_y >= 1000000000) { return y / 1000000000 + " BBTC"; }
else if (abs_y >= 1000000) { return y / 1000000 + " MBTC"; }
else if (abs_y >= 1000) { return y / 1000 + " KBTC"; }
else if (abs_y < 1 && y > 0) { return y.toFixed(4) + " BTC"; }
else if (abs_y === 0) { return ''; }
else { return y + " BTC"; }
};
self.scale = d3.scale.linear().domain(self.scaleDomain).range(self.scaleRange);//.nice();
self.graph = new Rickshaw.Graph(
{
element: document.querySelector("#chart"),
renderer: 'line',
stroke: true,
//width: 580,
//height: 250,
series: [
{
name: 'BTC Markets',
data: self.dataRendered.a,
color: 'steelblue',
scale: self.scale
},
{
name: 'FX',
data: self.dataRendered.b,
color: 'lightblue',
scale: self.scale
}
]
}
);
self.x_axes = new Rickshaw.Graph.Axis.Time(
{
graph: self.graph
}
);
self.y_axis = new Rickshaw.Graph.Axis.Y.Scaled(
{
graph: self.graph,
orientation: 'left',
ticks: self.ticks,
tickFormat: Rickshaw.Fixtures.Number.Currency.Btc,
element: document.getElementById('y_axis'),
scale: self.scale
}
);
this.graph.render();
};
//*****
//* Kickoff!
//*****
extDiff.init();
//*****
//* Archive Functions
//*****
extDiff.initRatioData2DataRendered = function() {
var tempDataRendered = {a: [], b: []};
for(var i = 0; i < this.usdBtcCadBtcRatioData.length; ++i) {
tempDataRendered.a.push(
{
x: i,
y: this.usdBtcCadBtcRatioData[i]
}
);
tempDataRendered.b.push(
{
x: i,
y: this.usdCadRatioData[i]
}
);
}
return tempDataRendered;
};
extDiff.reconfigureGraph = function() {
extDiff.graph.configure(
{
series: [
{
data: this.dataRendered.a,
color: 'steelblue'
},
{
data: this.dataRendered.b,
color: 'lightblue'
}
]
}
);
};
</script>
<script id="jsbin-source-javascript" type="text/javascript">//*****
//* Namespace Object
//*****
window.extDiff = {
fakeData: false,
cadPerUsd: '',
cadPerBtc: '',
usdPerBtc: '',
useEpoch: true,
aMultiplier: 1,
bMultiplier: 1,
usdCadRatioData: [],
usdBtcCadBtcRatioData: [],
dataRendered: {a: [], b: []},
scale: undefined,
scaleDomain: [1.2, 2],
scaleRange: [0, 1],
ticks: 10,
// http://fixer.io/
cadPerUsdEndpoint: 'https://api.fixer.io/latest?base=USD&symbols=CAD',
// https://www.quadrigacx.com/api_info
cadPerBtcEndpoint: 'https://api.quadrigacx.com/v2/ticker',
// https://developers.coinbase.com/api/v2#get-buy-price
usdPerBtcEndpoint: 'https://api.coinbase.com/v2/prices/buy',
testData: {
a: [
{
x: 0,
y: 13.04061318627961
},
{
x: 1,
y: 12.9136400322841
},
{
x: 2,
y: 12.910314517236642
}
],
b: [
{
x: 0,
y: 12.782
},
{
x: 1,
y: 12.782
},
{
x: 2,
y: 12.782
}
]
}
};
//*****
//* Functions for Fetching Remote Data
//** Could be cleaned up..
//*****
extDiff.getCadPerUsd = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.cadPerUsd = 1.2;
if(cb) return cb();
}
$.ajax(
self.cadPerUsdEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
//console.log(data);
self.cadPerUsd = parseFloat(data.rates.CAD);
console.log('1USD = ' + self.cadPerUsd + 'CAD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
extDiff.getCadPerBtc = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.cadPerBtc = 500;
if(cb) return cb();
}
$.ajax(
self.cadPerBtcEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
//console.log(data);
self.cadPerBtc = parseFloat(data.bid);
console.log('1BTC = ' + self.cadPerBtc + 'CAD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
extDiff.getUsdPerBtc = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.usdPerBtc = 700;
if(cb) return cb();
}
$.ajax(
self.usdPerBtcEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
self.usdPerBtc = parseFloat(data.data.amount);
console.log('1BTC = ' + self.usdPerBtc + 'USD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
//*****
//* Worker Functions
//*****
extDiff.getRemoteData = function() {
this.getCadPerUsd(
this.getCadPerBtc(
this.getUsdPerBtc(
this.processData()
)
)
)();
};
extDiff.processData = function() {
var self = this;
return function() {
var btcFx = self.usdPerBtc * self.cadPerUsd;
var cadBtcPerUsdBtc = self.cadPerBtc / self.usdPerBtc;
console.info(btcFx + ', ' + cadBtcPerUsdBtc);
self.usdCadRatioData.push(self.cadPerUsd * self.aMultiplier);
self.usdBtcCadBtcRatioData.push(cadBtcPerUsdBtc * self.bMultiplier);
if(self.usdCadRatioData.length !== self.usdBtcCadBtcRatioData.length) {
console.error('The ratio arrays aren\'t equal', self.usdCadRatioData, self.usdBtcCadBtcRatioData);
}
else {
self.updateChart();
}
};
};
//*****
//* Update Functions
//*****
extDiff.updateChart = function() {
var ratioDataLength = this.usdCadRatioData.length;
var dataRenderedLength = this.dataRendered.a.length;
var lastElement = ratioDataLength - 1;
this.append2DataRendered(
this.usdBtcCadBtcRatioData[lastElement],
this.usdCadRatioData[lastElement],
dataRenderedLength
);
console.log(this.dataRendered);
//this.reconfigureGraph();
this.graph.render();
};
extDiff.append2DataRendered = function(a, b, i) {
var x_out = i;
if(this.useEpoch) {
x_out = Math.floor((new Date()).getTime() / 1000);
}
this.dataRendered.a.push(
{
x: x_out,
y: a
}
);
this.dataRendered.b.push(
{
x: x_out,
y: b
}
);
};
//*****
//* Initialization Functions
//*****
extDiff.init = function() {
this.initGraph();
this.getRemoteData();
var intervalReg = setInterval(
function() {
extDiff.getRemoteData();
},
10000
);
};
extDiff.initGraph = function(){
var self = this;
if(self.useTestData) {
self.dataRendered = self.testData;
}
Rickshaw.Fixtures.Number.Currency = {};
Rickshaw.Fixtures.Number.Currency.Btc = function(y) {
var abs_y = Math.abs(y);
if (abs_y >= 1000000000000) { return y / 1000000000000 + " TBTC"; }
else if (abs_y >= 1000000000) { return y / 1000000000 + " BBTC"; }
else if (abs_y >= 1000000) { return y / 1000000 + " MBTC"; }
else if (abs_y >= 1000) { return y / 1000 + " KBTC"; }
else if (abs_y < 1 && y > 0) { return y.toFixed(4) + " BTC"; }
else if (abs_y === 0) { return ''; }
else { return y + " BTC"; }
};
self.scale = d3.scale.linear().domain(self.scaleDomain).range(self.scaleRange);//.nice();
self.graph = new Rickshaw.Graph(
{
element: document.querySelector("#chart"),
renderer: 'line',
stroke: true,
//width: 580,
//height: 250,
series: [
{
name: 'BTC Markets',
data: self.dataRendered.a,
color: 'steelblue',
scale: self.scale
},
{
name: 'FX',
data: self.dataRendered.b,
color: 'lightblue',
scale: self.scale
}
]
}
);
self.x_axes = new Rickshaw.Graph.Axis.Time(
{
graph: self.graph
}
);
self.y_axis = new Rickshaw.Graph.Axis.Y.Scaled(
{
graph: self.graph,
orientation: 'left',
ticks: self.ticks,
tickFormat: Rickshaw.Fixtures.Number.Currency.Btc,
element: document.getElementById('y_axis'),
scale: self.scale
}
);
this.graph.render();
};
//*****
//* Kickoff!
//*****
extDiff.init();
//*****
//* Archive Functions
//*****
extDiff.initRatioData2DataRendered = function() {
var tempDataRendered = {a: [], b: []};
for(var i = 0; i < this.usdBtcCadBtcRatioData.length; ++i) {
tempDataRendered.a.push(
{
x: i,
y: this.usdBtcCadBtcRatioData[i]
}
);
tempDataRendered.b.push(
{
x: i,
y: this.usdCadRatioData[i]
}
);
}
return tempDataRendered;
};
extDiff.reconfigureGraph = function() {
extDiff.graph.configure(
{
series: [
{
data: this.dataRendered.a,
color: 'steelblue'
},
{
data: this.dataRendered.b,
color: 'lightblue'
}
]
}
);
};
</script></body>
</html>
Raw
jsbin.hadahu.js
//*****
//* Namespace Object
//*****
window.extDiff = {
fakeData: false,
cadPerUsd: '',
cadPerBtc: '',
usdPerBtc: '',
useEpoch: true,
aMultiplier: 1,
bMultiplier: 1,
usdCadRatioData: [],
usdBtcCadBtcRatioData: [],
dataRendered: {a: [], b: []},
scale: undefined,
scaleDomain: [1.2, 2],
scaleRange: [0, 1],
ticks: 10,
// http://fixer.io/
cadPerUsdEndpoint: 'https://api.fixer.io/latest?base=USD&symbols=CAD',
// https://www.quadrigacx.com/api_info
cadPerBtcEndpoint: 'https://api.quadrigacx.com/v2/ticker',
// https://developers.coinbase.com/api/v2#get-buy-price
usdPerBtcEndpoint: 'https://api.coinbase.com/v2/prices/buy',
testData: {
a: [
{
x: 0,
y: 13.04061318627961
},
{
x: 1,
y: 12.9136400322841
},
{
x: 2,
y: 12.910314517236642
}
],
b: [
{
x: 0,
y: 12.782
},
{
x: 1,
y: 12.782
},
{
x: 2,
y: 12.782
}
]
}
};
//*****
//* Functions for Fetching Remote Data
//** Could be cleaned up..
//*****
extDiff.getCadPerUsd = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.cadPerUsd = 1.2;
if(cb) return cb();
}
$.ajax(
self.cadPerUsdEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
//console.log(data);
self.cadPerUsd = parseFloat(data.rates.CAD);
console.log('1USD = ' + self.cadPerUsd + 'CAD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
extDiff.getCadPerBtc = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.cadPerBtc = 500;
if(cb) return cb();
}
$.ajax(
self.cadPerBtcEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
//console.log(data);
self.cadPerBtc = parseFloat(data.bid);
console.log('1BTC = ' + self.cadPerBtc + 'CAD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
extDiff.getUsdPerBtc = function(cb) {
var self = this;
return function() {
if(self.fakeData) {
self.usdPerBtc = 700;
if(cb) return cb();
}
$.ajax(
self.usdPerBtcEndpoint,
{
method: 'get',
dataType: 'json'
}
).then(
function(data, textStatus, jqXHR) {
self.usdPerBtc = parseFloat(data.data.amount);
console.log('1BTC = ' + self.usdPerBtc + 'USD');
if(cb) cb();
},
function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
);
};
};
//*****
//* Worker Functions
//*****
extDiff.getRemoteData = function() {
this.getCadPerUsd(
this.getCadPerBtc(
this.getUsdPerBtc(
this.processData()
)
)
)();
};
extDiff.processData = function() {
var self = this;
return function() {
var btcFx = self.usdPerBtc * self.cadPerUsd;
var cadBtcPerUsdBtc = self.cadPerBtc / self.usdPerBtc;
console.info(btcFx + ', ' + cadBtcPerUsdBtc);
self.usdCadRatioData.push(self.cadPerUsd * self.aMultiplier);
self.usdBtcCadBtcRatioData.push(cadBtcPerUsdBtc * self.bMultiplier);
if(self.usdCadRatioData.length !== self.usdBtcCadBtcRatioData.length) {
console.error('The ratio arrays aren\'t equal', self.usdCadRatioData, self.usdBtcCadBtcRatioData);
}
else {
self.updateChart();
}
};
};
//*****
//* Update Functions
//*****
extDiff.updateChart = function() {
var ratioDataLength = this.usdCadRatioData.length;
var dataRenderedLength = this.dataRendered.a.length;
var lastElement = ratioDataLength - 1;
this.append2DataRendered(
this.usdBtcCadBtcRatioData[lastElement],
this.usdCadRatioData[lastElement],
dataRenderedLength
);
console.log(this.dataRendered);
//this.reconfigureGraph();
this.graph.render();
};
extDiff.append2DataRendered = function(a, b, i) {
var x_out = i;
if(this.useEpoch) {
x_out = Math.floor((new Date()).getTime() / 1000);
}
this.dataRendered.a.push(
{
x: x_out,
y: a
}
);
this.dataRendered.b.push(
{
x: x_out,
y: b
}
);
};
//*****
//* Initialization Functions
//*****
extDiff.init = function() {
this.initGraph();
this.getRemoteData();
var intervalReg = setInterval(
function() {
extDiff.getRemoteData();
},
10000
);
};
extDiff.initGraph = function(){
var self = this;
if(self.useTestData) {
self.dataRendered = self.testData;
}
Rickshaw.Fixtures.Number.Currency = {};
Rickshaw.Fixtures.Number.Currency.Btc = function(y) {
var abs_y = Math.abs(y);
if (abs_y >= 1000000000000) { return y / 1000000000000 + " TBTC"; }
else if (abs_y >= 1000000000) { return y / 1000000000 + " BBTC"; }
else if (abs_y >= 1000000) { return y / 1000000 + " MBTC"; }
else if (abs_y >= 1000) { return y / 1000 + " KBTC"; }
else if (abs_y < 1 && y > 0) { return y.toFixed(4) + " BTC"; }
else if (abs_y === 0) { return ''; }
else { return y + " BTC"; }
};
self.scale = d3.scale.linear().domain(self.scaleDomain).range(self.scaleRange);//.nice();
self.graph = new Rickshaw.Graph(
{
element: document.querySelector("#chart"),
renderer: 'line',
stroke: true,
//width: 580,
//height: 250,
series: [
{
name: 'BTC Markets',
data: self.dataRendered.a,
color: 'steelblue',
scale: self.scale
},
{
name: 'FX',
data: self.dataRendered.b,
color: 'lightblue',
scale: self.scale
}
]
}
);
self.x_axes = new Rickshaw.Graph.Axis.Time(
{
graph: self.graph
}
);
self.y_axis = new Rickshaw.Graph.Axis.Y.Scaled(
{
graph: self.graph,
orientation: 'left',
ticks: self.ticks,
tickFormat: Rickshaw.Fixtures.Number.Currency.Btc,
element: document.getElementById('y_axis'),
scale: self.scale
}
);
this.graph.render();
};
//*****
//* Kickoff!
//*****
extDiff.init();
//*****
//* Archive Functions
//*****
extDiff.initRatioData2DataRendered = function() {
var tempDataRendered = {a: [], b: []};
for(var i = 0; i < this.usdBtcCadBtcRatioData.length; ++i) {
tempDataRendered.a.push(
{
x: i,
y: this.usdBtcCadBtcRatioData[i]
}
);
tempDataRendered.b.push(
{
x: i,
y: this.usdCadRatioData[i]
}
);
}
return tempDataRendered;
};
extDiff.reconfigureGraph = function() {
extDiff.graph.configure(
{
series: [
{
data: this.dataRendered.a,
color: 'steelblue'
},
{
data: this.dataRendered.b,
color: 'lightblue'
}
]
}
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment