Built with blockbuilder.org
forked from trasherdk's block: chart.js block #1 XMR-EUR Intraday
forked from trasherdk's block: chart.js block #1 XMR-EUR Hourly
license: mit |
Built with blockbuilder.org
forked from trasherdk's block: chart.js block #1 XMR-EUR Intraday
forked from trasherdk's block: chart.js block #1 XMR-EUR Hourly
<!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> |