-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathexample002.html
128 lines (118 loc) · 4.31 KB
/
example002.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=800" />
<link type="text/css" rel="stylesheet" href="./css/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="./css/bigscatterchart.css" />
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript" src="./js/modernizr.js"></script>
<script type="text/javascript" src="./js/underscore-min.js"></script>
<script type="text/javascript" src="./js/date.js"></script>
<script type="text/javascript" src="./js/jquery.Class.js"></script>
<script type="text/javascript" src="./js/jquery.dragToSelect.js"></script>
<script type="text/javascript" src="./js/jquery.BigScatterChart.js"></script>
</head>
<body>
<div style="padding-left:100px">
<div id="chart1"></div>
<button onclick="oScatterChart.destroy()">Destory</button>
<a id="png-down" href="" download="BigScatterChart.png">Save as PNG</a>
<a id="jpg-down" href="" download="BigScatterChart.jpg">Save as JPEG</a>
</div>
<script type="text/javascript">
$('#png-down').click(function(e){
var sImageUrl = oScatterChart.getChartAsPNG();
$(this).attr('href', sImageUrl);
});
$('#jpg-down').click(function(e){
var sImageUrl = oScatterChart.getChartAsJPEG();
$(this).attr('href', sImageUrl);
});
var date = new Date();
if(Modernizr.canvas){
doBigScatterChart();
}
var oScatterChart;
function doBigScatterChart(){
oScatterChart = new BigScatterChart({
sContainerId : 'chart1',
nWidth : 800,
nHeight : 600,
nXMin: date.getTime() - (2880 * 60 * 1000), nXMax: date.getTime(), // 5m : 5, 20m : 20, 1h : 60, 6h : 360, 1d : 1440, 2d : 2880
nYMin: 0, nYMax: 10000,
nZMin: 0, nZMax: 5,
nBubbleSize: 3,
nDefaultRadius : 3,
htTypeAndColor : {
'Success' : '#b6da54', // type name : color
'Warning' : '#fcc666',
'Failed' : '#fd7865',
'Others' : '#55c7c7'
},
sXLabel : '(time)',
sYLabel : '(ms)',
fOnSelect : function(htPosition, htXY){
console.log('fOnSelect', htPosition, htXY);
console.time('fOnSelect');
var aData = this.getDataByXY(htXY.nXFrom, htXY.nXTo, htXY.nYFrom, htXY.nYTo);
console.timeEnd('fOnSelect');
console.log('adata length', aData.length);
//alert('Selected data count : ' + aData.length);
}
});
var htDataSource = {
sUrl : function(nFetchIndex) {
if(nFetchIndex === 0) {
return "http://114.111.41.36:8080/getLastScatterData.hippo";
} else {
return "http://114.111.41.36:8080/getScatterData.hippo";
}
},
htParam : function(nFetchIndex, htLastFetchParam, htLastFetchedData) {
// calculate parameter
var htData;
if(nFetchIndex === 0 || typeof(htLastFetchParam) === 'undefined' || typeof(htLastFetchedData) === 'undefined'){
htData = {
'application' : 'apigw-t',
'period' : 172800000,
'limit' : 5000
};
}else{
htData = {
'application' : 'apigw-t',
'from' : htLastFetchedData.scatter[htLastFetchedData.scatter.length - 1].x + 1,
'to' : date.getTime(),
'limit' : 5000
};
}
return htData;
},
nFetch : function(htLastFetchParam, htLastFetchedData) {
console.log('htLastFetchParam', htLastFetchParam)
if (htLastFetchedData.scatter.length != 0) {
return 0;
}
if (htLastFetchedData.scatter[htLastFetchedData.scatter.length - 1] &&
htLastFetchedData.scatter[htLastFetchedData.scatter.length - 1].x < date.getTime()) {
return 0;
}
return -1;
},
htOption : {
dataType : 'jsonp',
jsonp : '_callback'
}
};
oScatterChart.drawWithDataSource(htDataSource);
// oScatterChart.drawWithDataSourceInRealtime({
// }, 10000);
// oScatterChart.stopRealtime();
}
</script>
</body>
</html>