1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<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>
|
