-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgraph.html
304 lines (258 loc) · 7.25 KB
/
graph.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
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=dynamic-data
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
myChart.on('click', function(params){
if(params['seriesType'] == 'line'){
window.location.href="./table.html?time=" + params['name'];
}
else{
alert("막대는 미출력 됩니다.");
}
})
var app = {};
var option;
let bar_data=0;
let line_data=0;
//////////////////////////////////////////////////////////////////
////그래프 초기 필수 영역////
//x축 하단 데이터 생성 및 반환 함수
const categories = (function () {
let now = new Date();
let res = [];
let len = 5;
while (len--) {
//res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
const formattedDate = now.getFullYear() + '-' + (now.getMonth()+1).toString().padStart(2,'0') +
'-' + now.getDate().toString().padStart(2,'0') + ' ' + now.getHours().toString().padStart(2,'0') +
':' + now.getMinutes().toString().padStart(2,'0') + ':' + now.getSeconds().toString().padStart(2,'0');
res.unshift(formattedDate);
now = new Date(+now - 60000);
}
return res;
})();
//x축 상단 숫자 생성 및 반환 함수
const categories2 = (function () {
let res = [];
let len = 5;
while (len--) {
res.push(5 - len - 1);
}
return res;
})();
//처음 페이지 열릴때, 기본 출력 막대그래프 데이터를 랜덤으로 생성하는 코드
//지금 초기 데이터를 가져올때, 0들을 인식을 못하는 것 같은(다른 숫자도 인식을 못하는지는 확인해 봐야함
const data = (function () {
let res = [];
let len = 0;
// php를 통해서 데이터를 가져오는 AJAX함수
while (len<5) {
//console.log(categories);
$.ajax({
url: "./get_bar_data.php",
type:"post",
dataType:"json",
data: {
time_val:categories[len]
}
}).done(function(response1){
res.push(parseInt(response1['COUNT(*)']));
//res.push(Math.round(Math.random() * 1000));
}).fail(function(xhr){
console.log(xhr.status);
});
len++;
}
return res;
})();
//처음 페이지 열릴때, 기본 출력 꺽은선 그래프 데이터를 랜덤으로 생성하는 코드.
const data2 = (function () {
let res = [];
let len = 0;
while (len < 5) {
$.ajax({
url: "./get_line_data.php",
type:"post",
dataType:"json",
data: {
time_val:categories[len]
}
}).done(function(response2){
res.push(+parseInt(response2['COUNT(*)'])); // php파일에서 데이터 갯수를 못가져 오는지, 0이 출력됨
//res.push(+(Math.random() * 10 + 5).toFixed(1));
}).fail(function(xhr){
console.log("error");
});
len++;
}
return res;
})();
////그래프 초기 필수영역 끝////
//////////////////////////////////////////////////////////////////
//그래프 옵션 단계, 아마 여기에 핸들러를 설정해서 클릭옵션이 적용 가능할 예정
//그래프 이름과, 형태등을 설정하는 부분
option = {
title: {
text: '복제의심 탐지'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {},
toolbox: {
show: true,
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: categories
},
{
type: 'category',
boundaryGap: true,
data: categories2
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '복제 탐지 수',
max: 30,
min: 0,
boundaryGap: [1.0, 1.0]
},
{
type: 'value',
scale: true,
name: '전체 서비스 수',
max: 30,
min: 0,
boundaryGap: [1.0, 1.0]
}
],
series: [
{
name: '전체 서비스 사용수',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data
},
{
name: '복제 탐지 수',
type: 'line',
data: data2
}
]
};
//////////////////////////////////////////////////////////////////
app.count = 5;
//일정 시간이 지날때 마다 새로운 값을 생성해 그래프로 출력하는 부분
setInterval(function () {
// 시간을 가져오는 함수
//let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
let now = new Date();
let axisData = now.getFullYear() + '-' + (now.getMonth()+1).toString().padStart(2,'0') +
'-' + now.getDate().toString().padStart(2,'0') + ' ' + now.getHours().toString().padStart(2,'0') +
':' + now.getMinutes().toString().padStart(2,'0') + ':' + now.getSeconds().toString().padStart(2,'0');
$.ajax({
url: "./get_bar_data.php",
type:"post",
dataType:"json",
data: {
time_val:axisData
}
}).done(function(response1){
bar_data = parseInt(response1['COUNT(*)']);
}).fail(function(xhr){
console.log(xhr.status);
});
$.ajax({
url: "./get_line_data.php",
type:"post",
dataType:"json",
data: {
time_val:axisData
}
}).done(function(response2){
line_data = parseInt(response2['COUNT(*)']);
}).fail(function(xhr){
console.log(xhr.status);
});
setTimeout(function(){
//막대그래프를 그리는 부분
data.shift();
data.push(bar_data);//여기를 어떻게 바꾸면 php를 통해서 db의 데이터들을 가져 올 수 있음
//꺽은선 그래프를 그리는 부분
data2.shift();
data2.push(line_data);//여기를 어떻게 바꾸면 php를 통해서 db의 데이터들을 가져 올 수 있음
//밑 x축의 시간을 출력하는 부분, 위의 변수에서 시간을 가져와 새로운 시간을 만든다.
categories.shift();
categories.push(axisData);
//위 x축의 숫자를 출력하는 부분
categories2.shift();
categories2.push(app.count++);
//x축과 y축의 변수를 지정해서 새롭게 추가되는 데이터를 그래프에 적용시키는 부분
myChart.setOption({
xAxis: [
{
data: categories
},
{
data: categories2
}
],
series: [
{
data: data
},
{
data: data2
}
]
});
}, 1000); //1초
}, 60000); //60000 = 1분마다 새로고침
//////////////////////////////////////////////////////////////////
//wait sleep(3000);
setTimeout(function(){
if (option && typeof option === 'object') {
myChart.setOption(option);
}
}, 1000);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>