<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>