76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
var loadingDiv = document.getElementById('loading');
|
|
var errorDiv = document.getElementById('error');
|
|
var resultDiv = document.getElementById('result');
|
|
const timeout = 10000;
|
|
|
|
function getHistogram() {
|
|
// Send XHR to totalTable
|
|
loadingDiv.style.display = "";
|
|
errorDiv.style.display = "none";
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.timeout = timeout;
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState === XMLHttpRequest.DONE) {
|
|
if (xhr.status === 200) {
|
|
setData(JSON.parse(xhr.responseText));
|
|
} else {
|
|
setError();
|
|
}
|
|
}
|
|
};
|
|
xhr.open('GET', '/histogram-data', true);
|
|
xhr.send();
|
|
}
|
|
|
|
function setData(data) {
|
|
loadingDiv.style.display = "none";
|
|
errorDiv.style.display = "none";
|
|
|
|
var barChartData = {
|
|
labels: [],
|
|
datasets: [{
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgb(54, 162, 235, 1.0)',
|
|
borderWidth: 1,
|
|
label: 'Your lessons',
|
|
data: [],
|
|
}],
|
|
};
|
|
|
|
for (let key in data) {
|
|
barChartData.labels.push(data[key].time);
|
|
barChartData.datasets[0].data.push(data[key].count);
|
|
}
|
|
|
|
let canvas = document.createElement('canvas');
|
|
let ctx = canvas.getContext('2d');
|
|
|
|
document.getElementById('result').appendChild(canvas);
|
|
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: barChartData,
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Histogram of times of lessons'
|
|
}
|
|
}
|
|
}).update();
|
|
|
|
console.log(barChartData);
|
|
}
|
|
|
|
function setError() {
|
|
loadingDiv.style.display = "none";
|
|
errorDiv.style.display = "";
|
|
}
|
|
|
|
document.getElementById('tryAgain').addEventListener('click', getHistogram);
|
|
getHistogram();
|