-
Notifications
You must be signed in to change notification settings - Fork 0
/
barGraph.php
207 lines (200 loc) · 5.7 KB
/
barGraph.php
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html public"bar graph">
<html>
<head>
<meta charset="utf-8">
<?php include('connection.php');?>
<link rel="stylesheet" href="barGraph.css"/>
<script src="myScripts/jquery.js"></script>
<script>
$(function(){
//when user opens up the page, display:
var display=(function(){
$.ajax({
type: "get",
url: "read_insert_Votes.php",
data: { //read votes,amountOfPeople
sysMsg: "firstRead"
},
success: function(data){
var dat=jQuery.parseJSON(data);
var amountOfPeople=0;
for(var i=0; i<dat.length; i++){
amountOfPeople+=Number(dat[i]);
}
//use callback function
firstDisplay(dat,amountOfPeople,function(){
startRefresh();
});
}
});
})();
//read the votes from database once per 2 seconds
var startRefresh=function(){
setInterval(function(){
$.ajax({
type: "get",
url: "read_insert_Votes.php",
data: { //read votes,amountOfPeople
sysMsg: "read"
},
success: function(data){
var dat=jQuery.parseJSON(data);
var amountOfPeople=0;
for(var i=0; i<dat.length; i++){
amountOfPeople+=Number(dat[i]);
}
update(dat,amountOfPeople);
draw();
}
});
},1000);
};
//update the vote in database
$('#vote_form').on('submit',function(e){
e.preventDefault();
$.ajax({
async: true,
type: "get",
url: "read_insert_Votes.php",
data: {
field: $('#fields').find('option:Selected').val()
},
success: function(graph){
}
});
});
});
</script>
</head>
<body>
<form id='vote_form' action='/' method='get'>
<fieldset>
<legend>Give your vote!</legend>
<label for='fields'>Vote:</label>
<select id='fields'>"
<?php
$sql="SELECT field_name FROM vote_result";
$stmt=$conn->query($sql);
$result=$stmt->fetchAll(PDO::FETCH_COLUMN,0);
foreach($result as $value){
settype($value,'string');
echo "<option value='{$value}'>{$value}</option>";
echo $value;
}
?>
</select><br/>
<input type='submit' value='submit'/>
</fieldset>
</form>
<canvas id="canvas" height="300px"></canvas>
<legend for="canvas"></legend>
<script>
// flag for opening animation
var flag=[];
// get arr of select
var nameOfFields=[];
var countOfFields=document.querySelectorAll("option").length;
[].forEach.call(document.querySelectorAll("option"),function(options){
nameOfFields.push(options.value);
});
var arrOfFields=[];
var colors=['purple','red','green'];
var offset=20;
var bottom_offset=20;
var canvas=document.querySelector('#canvas');
var ctx=canvas.getContext('2d');
//dynamically generates a canvas
canvas.width=55*countOfFields; //35 for bar width, 20 for offset, looks good to me
var init=(function(){
//generate properties of each field and add them to arrOfFields
for(var i=0; i<countOfFields; i++){
var field=({
x: canvas.width/countOfFields*i, //leftoffset
y: canvas.height-bottom_offset,
width: 35,
height: 0,
name: nameOfFields[i],
color: colors[i%colors.length] //repeats the color if it points to the end of array colors
});
arrOfFields.push(field);
}
})();
var firstDisplay=function(votes,amountOfPeople,callback){
//draw legend
var legend = document.querySelector("legend[for='canvas']");
var ul = document.createElement("ul");
legend.append(ul);
ul.style.fontSize="15px";
for (var i=0; i<countOfFields; i++){
var li = document.createElement("li");
li.style.listStyle = "none";
li.style.borderLeft = "25px solid "+colors[i%colors.length];
li.style.padding = "5px";
li.textContent = arrOfFields[i].name;
ul.append(li);
}
//draw field_name at the bottom
ctx.font = "15px Arial";
ctx.textBaseline="bottom";
ctx.textAlign="center";
ctx.fillText("Bar Graphic Examples",canvas.width/2,canvas.height);
//play crawling up animation
window.play=setInterval(function(){
for(var i=0; i<countOfFields; i++){
var field=arrOfFields[i];
var height=votes[i]/amountOfPeople*(canvas.height-bottom_offset-18)*(-1);
if(field.height>height){ //because of minus value
field.height-=1;
ctx.clearRect(0,0,canvas.width,canvas.height-bottom_offset); //prevent borders from overlapping
draw();
}else{
if(flag.indexOf(field)===-1){ //in case of duplicates
flag.push(field);
}
if(flag.length===countOfFields){
if(window.play!=undefined&&window.play!='undefined'){
window.clearInterval(window.play);
}
callback();
}
}
}
},10);
}
//draw each field bar
function draw(){
for(var i=0; i<countOfFields; i++){
var field=arrOfFields[i];
//fill the rectangle with gradient color
var grd = ctx.createLinearGradient(field.x, field.y, field.x, field.y+field.height);
grd.addColorStop(0, "#ffffff");
grd.addColorStop(1, field.color);
ctx.fillStyle=grd;
ctx.fillRect(field.x,field.y,field.width,field.height);
ctx.strokeStyle="#000";
ctx.strokeRect(field.x,field.y,field.width,field.height);
ctx.stroke();
}
}
//update the graph per period
function update(votes,amountOfPeople){
//clean the existing graph and percentage
ctx.clearRect(0,0,canvas.width,canvas.height-bottom_offset);
var amountOfVotes;
for(var i=0; i<countOfFields; i++){
var field=arrOfFields[i];
//make sure bar height is always less than canvas height, -18 prevent the top number from being covered
var height=votes[i]/amountOfPeople*(canvas.height-bottom_offset-18)*(-1);
field.height= height;
amountOfVotes=votes[i];
//draw the amountOfVotes on the top
var txt_x=field.width/2+i*(field.width+offset); //txt_x is the middle of each bar
var txt_y=canvas.height-bottom_offset+field.height;
ctx.fillStyle="#000";
ctx.font='12px Arial';
ctx.fillText(amountOfVotes,txt_x,txt_y);
}
}
</script>
</body>
</html>