<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js" integrity="sha256-o8aByMEvaNTcBsw94EfRLbBrJBI+c3mjna/j4LrfyJ8=" crossorigin="anonymous"></script>
<title>Moubootaur Legends - Recent Online Activity</title>
</head>
<body>
<div style="width:90vw;height:30vh">
<canvas id="myChart" ></canvas>
</div>
<script>
var myChart
function requestData(filter) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/onlineHistory.csv', true);
xhr.responseType = 'text';
xhr.onload = function (e) {
if (this.status == 200) {
const d = parseCSV(this.responseText)
myChart.data.datasets[0].data = filter?filterData(d):d;
console.log(myChart.data.datasets[0].data)
myChart.update()
}
};
xhr.send();
}
function parseCSV(csv_string) {
const rows = csv_string.split(/\n|\r\n/g).map(r => r.split(', '))
rows.pop() //remove empty line at end of file
return rows.map(row => ({ x: row[0], y: row[1] }))
}
function filterData(data){
return data.filter((elem, index) => {
if(index === 0 || index === data.length - 1) return true;
var before = data[index-1].y
var current = elem.y
var after = data[index+1].y
return !(before === current && current === after)
})
}
function initChart() {
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
datasets: [{
backgroundColor: 'rgba(50,205,50,0.4)',
borderColor: 'rgba(50,205,50,1)',
borderWidth: 1,
lineTension: 0,
label: 'Players online',
data: []
}]
}
const options = {
responsive: true,
title: {
display: true,
text: "Players online over time"
},
scales: {
xAxes: [{
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
distribution: 'linear',
time:{
min: new Date("2019-04-25 23:33:01.121967")
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}],
}
}
myChart = new Chart(ctx, { type: 'line', data, options });
}
initChart();
requestData(true);
</script>
<button onclick="requestData(false)">refresh & show raw Data</button>
<button onclick="requestData(true)">refresh & show filtered Data</button>
</body>
</html>