trasherdk/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--script src="https://d3js.org/d3.v4.min.js"></script-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #message {border: 1px solid black; height: 250 px;}
  </style>
</head>

<body>
  <canvas id="chart1" width="500" height="300"></canvas>
  <div id="message"></div>

  <script>
const URL="https://min-api.cryptocompare.com/data/histoday?fsym=XMR&tsym=EUR&limit=14&e=CCCAGG";
var msg, txt;
var feed = [];

axios.get(URL)
  .then(function (response) {
    // handle success
  	var data = response.data.Data.map(function(d){
      return {
        date: new Date(d.time * 1000),
        close: +d.close,
        volume: +d.volumefrom
      }
    });
//    console.log("Data",data);
    feed = data;
  })
  .catch(function (error) {
    // handle error
  	console.log(error);
  })
  .then(function () {
    // always executed
  	draw(feed)
  	console.log("Exit Axios");
  });

function draw(data) {
  console.log("Enter Draw()");

  var tlabels = data.map(function(d){
    return getDate(d.date);
  });
  var tvalues = data.map(function(d){
    return d.close;
  });
  var tvolumes = data.map(function(d){
    return d.volume;
  });

  var ctx = document.getElementById("chart1").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: tlabels,
        datasets: [{
          	yAxisID: "price-y",
            label: 'XMR-EUR',
            data: tvalues,
            backgroundColor: [
                'rgba(255, 255, 255, 0.3)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1,
          	type: 'line'
        },{
          yAxisID: "volume-y",
          label: 'XMR Volume',
          data: tvolumes,
            backgroundColor: [
                'rgba(255, 255, 255, 0.3)',
            ],
            borderColor: [
                'rgba(55,99,255,1)',
            ],
            borderWidth: 1,
          type: 'bar'
        }]
    },
    options: {
        title: {
          display: true,
          text: "XMR-EUR Intraday"
        },
        scales: {
            yAxes: [{
              position: "left",
              id: "price-y",
            	ticks: {
                min: 0, // Math.round(Math.min(...tvalues)),
                max: Math.round(Math.max(...tvalues))+20,
               	beginAtZero:true
                }
            },{
              position: "right",
              id: "volume-y",
            	ticks: {
                min: 0, //Math.round(Math.min(...tvolumes)),
                max: Math.round(Math.max(...tvolumes)),
               	beginAtZero:true
                }
            }]
        }
    }
	});
}
function getDate(date) {
  date = date || new Date()

  const year = date.getFullYear()
  const month = twoDigit(date.getMonth() + 1)
  const day = twoDigit(date.getDate())

  return `${year}-${month}-${day}`
}
function getTime (time) {
  time = time || new Date()

  const hour = twoDigit(time.getHours())
  const minutes = twoDigit(time.getMinutes())
  const seconds = twoDigit(time.getSeconds())

  return `${hour}:${minutes}:${seconds}`
}
function getDateTime (datetime) {
  datetime = datetime || new Date()

  const date = this(datetime)
  const hour = twoDigit(datetime.getHours())
  const minutes = twoDigit(datetime.getMinutes())
  const seconds = twoDigit(datetime.getSeconds())

  return `${date} ${hour}:${minutes}:${seconds}`
}
function twoDigit (n) {
  return ('0' + n).slice(-2)
}
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<!--script src="https://d3js.org/d3.v4.min.js"></script-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#message {border: 1px solid black; height: 250 px;}
	</style>
	</head>

	<body>
	<canvas id="chart1" width="500" height="300"></canvas>
	<div id="message"></div>

	<script>
	const URL="https://min-api.cryptocompare.com/data/histoday?fsym=XMR&tsym=EUR&limit=14&e=CCCAGG";
	var msg, txt;
	var feed = [];

	axios.get(URL)
	.then(function (response) {
	// handle success
	var data = response.data.Data.map(function(d){
	return {
	date: new Date(d.time * 1000),
	close: +d.close,
	volume: +d.volumefrom
	}
	});
	// console.log("Data",data);
	feed = data;
	})
	.catch(function (error) {
	// handle error
	console.log(error);
	})
	.then(function () {
	// always executed
	draw(feed)
	console.log("Exit Axios");
	});

	function draw(data) {
	console.log("Enter Draw()");

	var tlabels = data.map(function(d){
	return getDate(d.date);
	});
	var tvalues = data.map(function(d){
	return d.close;
	});
	var tvolumes = data.map(function(d){
	return d.volume;
	});

	var ctx = document.getElementById("chart1").getContext('2d');
	var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
	labels: tlabels,
	datasets: [{
	yAxisID: "price-y",
	label: 'XMR-EUR',
	data: tvalues,
	backgroundColor: [
	'rgba(255, 255, 255, 0.3)',
	],
	borderColor: [
	'rgba(255,99,132,1)',
	],
	borderWidth: 1,
	type: 'line'
	},{
	yAxisID: "volume-y",
	label: 'XMR Volume',
	data: tvolumes,
	backgroundColor: [
	'rgba(255, 255, 255, 0.3)',
	],
	borderColor: [
	'rgba(55,99,255,1)',
	],
	borderWidth: 1,
	type: 'bar'
	}]
	},
	options: {
	title: {
	display: true,
	text: "XMR-EUR Intraday"
	},
	scales: {
	yAxes: [{
	position: "left",
	id: "price-y",
	ticks: {
	min: 0, // Math.round(Math.min(...tvalues)),
	max: Math.round(Math.max(...tvalues))+20,
	beginAtZero:true
	}
	},{
	position: "right",
	id: "volume-y",
	ticks: {
	min: 0, //Math.round(Math.min(...tvolumes)),
	max: Math.round(Math.max(...tvolumes)),
	beginAtZero:true
	}
	}]
	}
	}
	});
	}
	function getDate(date) {
	date = date \|\| new Date()

	const year = date.getFullYear()
	const month = twoDigit(date.getMonth() + 1)
	const day = twoDigit(date.getDate())

	return `${year}-${month}-${day}`
	}
	function getTime (time) {
	time = time \|\| new Date()

	const hour = twoDigit(time.getHours())
	const minutes = twoDigit(time.getMinutes())
	const seconds = twoDigit(time.getSeconds())

	return `${hour}:${minutes}:${seconds}`
	}
	function getDateTime (datetime) {
	datetime = datetime \|\| new Date()

	const date = this(datetime)
	const hour = twoDigit(datetime.getHours())
	const minutes = twoDigit(datetime.getMinutes())
	const seconds = twoDigit(datetime.getSeconds())

	return `${date} ${hour}:${minutes}:${seconds}`
	}
	function twoDigit (n) {
	return ('0' + n).slice(-2)
	}
	</script>
	</body>
	</html>