Skip to content

Instantly share code, notes, and snippets.

@trasherdk

trasherdk/.block

Last active September 24, 2018 04:45
Show Gist options
  • Save trasherdk/604dc4cf510b98249c86a632421ce411 to your computer and use it in GitHub Desktop.
Save trasherdk/604dc4cf510b98249c86a632421ce411 to your computer and use it in GitHub Desktop.
Download ZIP
chart.js block #1 XMR-EUR Intraday
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="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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment