-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (111 loc) · 4.1 KB
/
index.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<title>Results </title>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<link rel="stylesheet" href="index.css">
<style>
body {
background-color: #181818;
font-family: "Press Start 2P";
}
h1 {
color:yellow;
}
h2 {
color: #cd192D;
font-family: "Press Start 2P";
}
.chart-container {
width: 60%;
margin: auto;
margin-bottom: 3em;
margin-top: 3em;
background-color: #D0D0D0;
padding: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<center>
<h1>RESULTS ARE IN!</h1>
<h2 id="counter"></h2>
</center>
<div id="charts"></div>
<script>
async function show() {
Chart.register(ChartDataLabels);
Chart.defaults.font.size = 20;
Chart.defaults.font.weight = "bold";
const response = await fetch("participants-real-sycl.json");
const data = await response.json();
document.getElementById("counter").innerText = "(" + 48 + " participants)"
var questions = Object.keys(data[0].appstate).filter(key => key != 'agreement_checked_at' && key != 'dataprotection_checked_at');
var colors = ['rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)', 'rgba(255, 159, 64, 0.5)'];
questions.forEach(function(question) {
// Count the answers for this question
var answerCounts = {};
data.forEach(function(participant) {
var answer = participant.appstate[question];
if (answer == undefined) {
return;
}
if (answerCounts[answer] == null) {
answerCounts[answer] = 1;
} else {
answerCounts[answer]++;
}
});
// Create a div for the chart
var div = document.createElement('div');
div.className = 'chart-container';
document.getElementById('charts').appendChild(div);
// Create a title for the chart
var title = document.createElement('h2');
title.innerText = "" + question;
div.appendChild(title);
// Create a canvas for the chart
var canvas = document.createElement('canvas');
div.appendChild(canvas);
// Prepare colors for each bar
var barColors = colors.slice(0, Object.keys(answerCounts).length);
// Create the chart
var ctx = canvas.getContext('2d');
var totalParticipants = data.length;
var chart =new Chart(ctx, {
type: 'bar',
data: {
labels: Object.keys(answerCounts),
datasets: [{
label: null,
data: Object.values(answerCounts),
backgroundColor: barColors, // Use dynamic colors for each bar
// borderColor: 'rgba(0, 0, 0, 1)',
borderColor: 'grey',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false // hide the dataset label
},
datalabels: {
color: 'black',
formatter: function(value, context) {
return (value/totalParticipants*100).toFixed(2) + '%';
}
}
}
}
});
});
}
show();
</script>
</body>
</html>