Skip to content

Instantly share code, notes, and snippets.

@zDEFz

zDEFz/index.html

Created February 3, 2021 20:48
Show Gist options
  • Save zDEFz/4478d49c8b019d01e03597ae7c95a963 to your computer and use it in GitHub Desktop.
Save zDEFz/4478d49c8b019d01e03597ae7c95a963 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<title>Piano playing (active)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="360">
<head>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
<script type="text/javascript">
function returncurrentdate() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
return today;
}
function returnHoursMinutesFromHours(entry) {
console.log(entry);
var num = (entry * 60).toFixed(0);
var hours = Math.floor(num / 60);
var minutes = num % 60;
var out = hours + "h " + minutes + 'm';
if (hours == 0) {
out = minutes + 'm'
};
return out;
}
</script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<!-- Daily Spline -->
<script type="text/javascript">
//disable all animations and then continue with the charts
Highcharts.setOptions({
plotOptions: {
series: {
animation: false
}
}
});
$.get('https://raw.githubusercontent.com/zDEFz/PTQ-Stat/main/out.csv', function(csv) {
$('#container').highcharts({
chart: {
type: 'spline',
events: {
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
yExtremes = yAxis.getExtremes(),
yMin = yExtremes.min,
yMax = yExtremes.max,
threshold = chart.options.plotOptions.series.threshold,
options = {
plotLines: [{
color: '#228B22',
width: 2,
value: threshold,
zIndex: 10,
label: {
text: '',
x: 0,
y: 20
}
}]
};
if (threshold < yMin) {
options = Highcharts.merge(options, {
min: threshold
});
} else if (threshold > yMax) {
options = Highcharts.merge(options, {
min: 0,
max: threshold
});
}
yAxis.update(options);
}
}
},
plotOptions: {
series: {
threshold: .75
}
},
data: {
csv: csv
},
title: {
text: 'Piano played (active)'
},
xAxis: {
labels: {
style: {
color: 'black',
fontSize: '10pt'
},
},
},
yAxis: {
min: 0,
title: 'hours',
labels: {
style: {
color: 'black',
fontSize: '12pt'
},
},
},
tooltip: {
formatter: function() {
console.log(this.y * 60);
var num = (this.y * 60).toFixed(0);
var hours = Math.floor(num / 60);
var minutes = num % 60;
var out = hours + "h " + minutes + 'm';
if (hours == 0) {
out = minutes + 'm'
};
return out + '<br> ' + Highcharts.dateFormat('%d.%m.%Y', this.x) + '</br>';
}
},
}, );
});
</script>
<!-- Monthly -->
<script type="text/javascript">
fetch('https://raw.githubusercontent.com/zDEFz/PTQ-Stat/main/out_m.csv').then((response) => {
response.text().then((data) => {
var monthDataArray = data.split("\n");
monthDataArray = monthDataArray.filter(item => item);
console.log(monthDataArray);
var temparray = monthDataArray[monthDataArray.length - 1].split(",");
var temp = temparray[temparray.length - 1];
var currentMonthHours = temp.replace(']', '').replace(' ', '');
var currentMonthHours_parsed = parseFloat(currentMonthHours);
console.log('currentMonthHours_parsed ' + currentMonthHours_parsed.toFixed(0));
console.log('currentMonthHours_goal ' + '22.5');
var currentmonthHoursFormatted = returnHoursMinutesFromHours(currentMonthHours_parsed);
if (typeof currentmonthHoursFormatted == 'undefined') {
currentmonthHoursFormatted = "";
};
console.log(currentmonthHoursFormatted);
var currentMonthHoursPercentage = 100 * currentMonthHours_parsed / 22.5;
console.log('currentMonthHoursPercentage ' + currentMonthHoursPercentage.toFixed(0));
var currentMonthHoursPercentageRemainder = 100 - currentMonthHoursPercentage;
console.log('currentMonthHoursPercentageRemainder ' + currentMonthHoursPercentageRemainder.toFixed(0));
today = returncurrentdate();
$(document).ready(function() {
//monthly chart
$('#monthly').highcharts({
// Create the chart
series: [{
type: 'pie',
enableMouseTracking: false,
innerSize: '80%',
dataLabels: {
enabled: false
},
data: [{
y: currentMonthHoursPercentage
}, {
y: currentMonthHoursPercentageRemainder,
color: '#e3e3e3'
}]
}],
title: {
text: 'Monthly goal (22.5h)'
},
subtitle: {
text: `<div><b>${(100*currentMonthHours_parsed / 22.5).toFixed(0)}% (${(currentmonthHoursFormatted)})</p></div></b>`,
align: "center",
verticalAlign: "middle",
style: {
"fontSize": "18pt",
"textAlign": "center",
"color": "#6ca3dd",
},
x: 0,
y: -2,
useHTML: true
},
});
});
var dailyDataArray;
// Daily
fetch('https://raw.githubusercontent.com/zDEFz/PTQ-Stat/main/out.csv').then((response) => {
response.text().then((data) => {
var dailyDataArray = data.split("\n");
console.log(today);
today = returncurrentdate();
if (dailyDataArray.find(a => a.includes(today) > 0)) {
console.log("today:" + today + 'found in daily dataarray');
todaystring = dailyDataArray.find(a => a.includes(today));
playedtodayArr = todaystring.split(",");
var currentDayHoursdayparsed = parseFloat(playedtodayArr[1]);
console.log('currentDayHoursdayparsed ' + currentDayHoursdayparsed.toFixed(2));
var currentDayHoursdayformatted = returnHoursMinutesFromHours(currentDayHoursdayparsed);
if (typeof currentDayHoursdayformatted == 'undefined') {
currentDayHoursdayformatted = '';
};
console.log('currentDayHoursdayformatted ' + currentDayHoursdayformatted);
currentDaily_goal = 0.75;
console.log('currentDaily_goal ' + currentDaily_goal + '45 minutes');
var currentDayHoursdayPercentage = 100 * currentDayHoursdayparsed / currentDaily_goal;
console.log('currentDayHoursdayPercentage ' + currentDayHoursdayPercentage.toFixed(0));
var currentDayHoursdayPercentageRemainder = 100 - currentDayHoursdayPercentage;
console.log('currentDayHoursdayPercentageRemainder ' + currentDayHoursdayPercentageRemainder);
} else {
currentDayHoursdayparsed = 0;
}
$('#daily').highcharts({
// Create the chart
series: [{
type: 'pie',
enableMouseTracking: false,
innerSize: '80%',
dataLabels: {
enabled: false
},
data: [{
y: currentDayHoursdayPercentage
}, {
y: currentDayHoursdayPercentageRemainder,
color: '#e3e3e3'
}]
}],
title: {
text: 'Daily goal (45 min)'
},
subtitle: {
text: `<div><b>${(100*currentDayHoursdayparsed / 0.75).toFixed(0)}% (${(currentDayHoursdayformatted)})</p></div></b>`,
align: "center",
verticalAlign: "middle",
style: {
"fontSize": "18pt",
"textAlign": "center",
"color": "#6ca3dd",
},
x: 0,
y: -2,
useHTML: true
},
});
});
});
})
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div class="row">
<div class="row w3-row" style="background-color:#aaa;">
<div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>
</div>
<div class="column w3-half" style="background-color:#aaa;">
<div id="monthly" style="width: 100%; height: 100%; margin: 0 auto"></div>
</div>
<div class="column w3-half" style="background-color:#bbb;">
<div id="daily" style="width: 100%; height: 100%; margin: 0 auto"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment