-
Notifications
You must be signed in to change notification settings - Fork 2
/
report.html
123 lines (119 loc) · 6.62 KB
/
report.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Report</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link rel="stylesheet" href="css/styletwo.css">
<link rel="stylesheet" href="css/style.css">
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.grid {
height: auto;
margin: auto;
}
</style>
</head>
<body>
<!-- Navigation -->
<div class="navigation">
<div class="innerNavigation">
<input id="btnDashboard" type="button" value="Dashboard" class="btnMenu">
</div>
</div>
<!-- Title -->
<h1 class="page-header" align="center">REPORT: IMPACT OF UNVACCINATED CHILDREN</h1>
<!-- Description -->
<div class="description">
Assalamualaikum and a very good day to everyone. We are from Faculty of Computer and Mathematical Sciences, course CS230 Bachelor of Computer Science (Hons.). We are presenting the report of the research survey on impact of unvaccinated children. This report will help us visualize the finding of the survey.
</div>
<!-- Question -->
<div class="grid">
<form method="POST" id="main">
<div id="quiz">
<p id="question1"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart1" width="400" height="400"></canvas>
</div>
<p id="question2"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart2" width="400" height="400"></canvas>
</div>
<p id="question3"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart3" width="400" height="400"></canvas>
</div>
<p id="question4"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart4" width="400" height="400"></canvas>
</div>
<p id="question5"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart5" width="400" height="400"></canvas>
</div>
<p id="question6"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart6" width="400" height="400"></canvas>
</div>
<p id="question7"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart7" width="400" height="400"></canvas>
</div>
<p id="question8"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart8" width="400" height="400"></canvas>
</div>
<p id="question9"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart9" width="400" height="400"></canvas>
</div>
<p id="question10"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart10" width="400" height="400"></canvas>
</div>
<p id="question11"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart11" width="400" height="400"></canvas>
</div>
<p id="question12"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart12" width="400" height="400"></canvas>
</div>
<p id="question13"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart13" width="400" height="400"></canvas>
</div>
<p id="question14"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart14" width="400" height="400"></canvas>
</div>
<p id="question15"></p>
<div class="chart-container" style="display: block; margin-left: auto; margin-right: auto;width: 390px; height: 390px;">
<canvas id="myChart15" width="400" height="400"></canvas>
</div>
</div>
</form>
</div>
<script>
// Go to dashboard when clicked
document.getElementById("btnDashboard").onclick = function () {
location.href = "dashboard.html";
};
// Set to disable chart.js injection
Chart.platform.disableCSSInjection = true;
// Loop to fetch each one of bar charts
for(i=1; i<=15; i++){
$.post("http://35.240.226.40/php/getreport.php", {number: i}, function(result){
$('[id="myChart1"]').html(result);
});
};
</script>
</body>
</html>