newscloud/index.html

## index.html

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

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