Created
July 21, 2018 01:52
-
-
Save newscloud/e3db5fb9749fd02f61dee67d2e004c17 to your computer and use it in GitHub Desktop.
Multi-series charting demo from ProgammableWeb coinlayer cryptocurrency API introduction
This file contains 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
<html lang="en"> | |
<head> | |
<!-- replace mine with your insert your favorite jquery source --> | |
<script src="http://localhost:8888/mp/assets/c19d41b1/jquery.js"></script> | |
<!-- end note --> | |
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
.axis path { | |
fill: none; | |
stroke: #777; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: Lato; | |
font-size: 13px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<script> | |
function toTimestamp(strDate){ | |
var datum = Date.parse(strDate); | |
return datum/1000; | |
} | |
function toDatestr(timestamp) { | |
d= new Date(timestamp); | |
return d.getFullYear() + "-" + | |
("00" + (d.getMonth() + 1)).slice(-2) + "-" + | |
("00" + d.getDate()).slice(-2); | |
} | |
function getData() { | |
// set endpoint and your API key | |
access_key = 'XXXXXXXXXXXXXXX'; | |
endpoint = 'timeframe'; | |
// define request variables | |
symbols = 'DASH,LTC,ETH,XMR,XRP,ZEC,BCH'; | |
target = 'EUR'; | |
start_date='2018-01-01'; | |
end_date='2018-06-30'; | |
endpointUrl = 'https://api.coinlayer.com/api/' + endpoint + | |
'?access_key=' + access_key + | |
'&target=' + target + '&start_date=' + start_date + '&end_date=' + end_date + | |
'&symbols=' + symbols; | |
$.ajax({ | |
url: endpointUrl, | |
success: function(json) { | |
rates = json.rates; | |
data=[]; | |
indexCnt=0; | |
// transpose the results into a structure for the charting | |
$.each(rates, function( index, value ) { | |
$.each(value, function (idx,val) { | |
data[indexCnt]={ | |
"Coin":idx, | |
"price":val, | |
"date":(toTimestamp(index)-toTimestamp(start_date))/(3600*24), | |
}; | |
indexCnt+=1; | |
}); | |
}); | |
InitChart(data); | |
} | |
}); | |
} | |
function InitChart(data) { | |
var dataGroup = d3.nest() | |
.key(function(d) {return d.Coin;}) | |
.entries(data); | |
var color = d3.scale.category10(); | |
var vis = d3.select("#visualisation"), | |
WIDTH = 1000, | |
HEIGHT = 500, | |
MARGINS = { | |
top: 50, | |
right: 20, | |
bottom: 50, | |
left: 50 | |
}, | |
lSpace = WIDTH/dataGroup.length; | |
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) { | |
return d.date; | |
}), d3.max(data, function(d) { | |
return d.date; | |
})]), | |
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) { | |
return d.price; | |
}), d3.max(data, function(d) { | |
return d.price; | |
})]), | |
xAxis = d3.svg.axis() | |
.scale(xScale), | |
yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
vis.append("svg:g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") | |
.call(xAxis); | |
vis.append("svg:g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (MARGINS.left) + ",0)") | |
.call(yAxis); | |
var lineGen = d3.svg.line() | |
.x(function(d) { | |
return xScale(d.date); | |
}) | |
.y(function(d) { | |
return yScale(d.price); | |
}) | |
.interpolate("basis"); | |
dataGroup.forEach(function(d,i) { | |
vis.append('svg:path') | |
.attr('d', lineGen(d.values)) | |
.attr('stroke', function(d,j) { | |
return "hsl(" + Math.random() * 360 + ",100%,50%)"; | |
}) | |
.attr('stroke-width', 2) | |
.attr('id', 'line_'+d.key) | |
.attr('fill', 'none'); | |
vis.append("text") | |
.attr("x", (lSpace/2)+i*lSpace) | |
.attr("y", HEIGHT) | |
.style("fill", "black") | |
.attr("class","legend") | |
.on('click',function(){ | |
var active = d.active ? false : true; | |
var opacity = active ? 0 : 1; | |
d3.select("#line_" + d.key).style("opacity", opacity); | |
d.active = active; | |
}) | |
.text(d.key); | |
}); | |
} | |
getData(); | |
</script> | |
<svg id="visualisation" width="1000" height="500"></svg> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment