Skip to content

Instantly share code, notes, and snippets.

@trasherdk

trasherdk/.block

Last active September 11, 2018 03:04
Show Gist options
  • Save trasherdk/bebdce4b85e2531fa4b1b25272f1b482 to your computer and use it in GitHub Desktop.
Save trasherdk/bebdce4b85e2531fa4b1b25272f1b482 to your computer and use it in GitHub Desktop.
Download ZIP
chart.js block #1 XMR-EUR Hourly
Raw
.block
license: mit
Raw
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="250"></canvas>
<div id="message"></div>
<script>
const URL="https://min-api.cryptocompare.com/data/histohour?fsym=XMR&tsym=EUR&limit=24";
var msg, txt;
var feed = [];
axios.get(URL)
.then(function (response) {
// handle success
var data = response.data.Data.map(function(d){
var ms = new Date(d.time * 1000);
return {
date: ms,
close: +d.close,
volume: +d.volumeto
}
});
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 getTime(d.date);
});
var tvalues = data.map(function(d){
return d.close;
});
var tvolumes = data.map(function(d){
return d.volume.toFixed(4);
});
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: 'EUR 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 by Hour"
},
scales: {
yAxes: [{
display: true,
stacked: false,
position: "left",
id: "price-y",
ticks: {
min: 0, // Math.round(Math.min(...tvalues)),
max: Math.max(...tvalues)+20,
beginAtZero:true
}
},{
display: true,
stacked: false,
position: "right",
id: "volume-y",
ticks: {
min: 0, //Math.round(Math.min(...tvolumes)),
max: 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment