AmCharts realtime flush example//add by liuwei 2012-09-29
37440 단어 amcharts
1 /**
2 * XXX
3 * author: liuwei
4 * create date: 2012-09-28
5 */
6 var _809Server_Explorer = {
7
8 //
9 osName:"",
10
11 //
12 ramData:[
13 // {
14 // name:"1.23GB",
15 // value:1.23,
16 // color:"#ff0000"
17 // }
18 ],
19
20 //
21 threadData:[
22 // {
23 // generateDate:new Date(), //
24 // value:28 //
25 // }
26 ],
27
28 chartData : [
29 // {
30 // date: new Date(),
31 // usedMemory: 20
32 // }
33 ],
34
35 //RAM Chart instance
36 ramChart: new AmCharts.AmSerialChart(),
37
38 //Thread Chart instance
39 threadChart: new AmCharts.AmSerialChart(),
40
41 //RAM Line Chart instance
42 ramLineChart: new AmCharts.AmSerialChart(),
43
44 /**
45 * RAM
46 */
47 drawRAMChart:function(){
48
49 this.ramChart.dataProvider = this.ramData;
50 this.ramChart.categoryField = "name";
51 this.ramChart.startDuration = 0;
52 // sometimes we need to set margins manually
53 // autoMargins should be set to false in order chart to use custom margin values
54 this.ramChart.autoMargins = true;
55 this.ramChart.marginRight = 0;
56 this.ramChart.marginBottom = 0;
57 this.ramChart.marginTop = 0;
58
59 // AXES
60 // category
61 var categoryAxis = this.ramChart.categoryAxis;
62 categoryAxis.inside = true;
63 categoryAxis.axisAlpha = 1;
64 categoryAxis.gridAlpha = 0;
65 categoryAxis.tickLength = 0;
66
67 /**
68 // value
69 var valueAxis = new AmCharts.ValueAxis();
70 valueAxis.minimum = 0;
71 valueAxis.axisAlpha = 0;
72 valueAxis.maximum = 4;
73 valueAxis.dashLength = 4;
74 this.ramChart.addValueAxis(valueAxis);
75 **/
76
77 // GRAPH
78 var graph = new AmCharts.AmGraph();
79 graph.valueField = "value";
80 graph.customBulletField = "bullet"; // field of the bullet in data provider
81 graph.bulletOffset = 16; // distance from the top of the column to the bullet
82 graph.colorField = "color";
83 graph.bulletSize = 34; // bullet image should be rectangle (width = height)
84 graph.type = "column";
85 graph.fillAlphas = 0.5;
86 graph.cornerRadiusTop = 8;
87 graph.lineAlpha = 0;
88 graph.balloonText = " : [[value]] G";
89 this.ramChart.addGraph(graph);
90
91 // WRITE
92 this.ramChart.write("ramDiv");
93 },
94
95 /**
96 * Thread
97 */
98 drawThreadChart:function(){
99
100 this.threadChart.pathToImages = "http://www.cnblogs.com/js/amcharts/images/";
101 this.threadChart.zoomOutButton = {
102 backgroundColor: '#000000',
103 backgroundAlpha: 0.15
104 };
105 this.threadChart.marginRight = 10;
106 this.threadChart.dataProvider = this.threadData;
107 this.threadChart.categoryField = "generateDate";
108
109 // AXES
110 // Category
111 var categoryAxis = this.threadChart.categoryAxis;
112 categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
113 categoryAxis.minPeriod = "ss"; // our data is yearly, so we set minPeriod to YYYY
114 categoryAxis.gridAlpha = 0.05;
115 categoryAxis.axisColor="#DADADA";
116
117 // VALUE
118 var valueAxis = new AmCharts.ValueAxis();
119 valueAxis.title = " ";
120 valueAxis.gridAlpha = 0;
121 valueAxis.axisAlpha = 1;
122 valueAxis.fillColor = "#000000";
123 valueAxis.fillAlpha = 0.05;
124 valueAxis.inside = false;
125 valueAxis.axisColor = "#DADADA";
126
127 this.threadChart.addValueAxis(valueAxis);
128
129 // GRAPH
130 var graph = new AmCharts.AmGraph();
131 graph.type = "step"; // this line makes step graph
132 graph.valueField = "value";
133 graph.lineColor = "#000000";
134 graph.balloonText = "[[value]]";
135 this.threadChart.addGraph(graph);
136
137 // CURSOR
138 var chartCursor = new AmCharts.ChartCursor();
139 chartCursor.cursorAlpha = 0;
140 chartCursor.cursorPosition = "mouse";
141 chartCursor.categoryBalloonDateFormat = "HH ";
142 this.threadChart.addChartCursor(chartCursor);
143
144 // SCROLLBAR
145 var chartScrollbar = new AmCharts.ChartScrollbar();
146 chartScrollbar.graph = graph;
147 chartScrollbar.backgroundAlpha = 0.1;
148 chartScrollbar.backgroundColor = "#000000";
149 chartScrollbar.graphLineAlpha = 0.1;
150 chartScrollbar.graphFillAlpha = 0;
151 chartScrollbar.selectedGraphFillAlpha = 0;
152 chartScrollbar.selectedGraphLineAlpha = 0.25;
153 chartScrollbar.scrollbarHeight = 20;
154 chartScrollbar.selectedBackgroundColor = "#FFFFFF";
155 this.threadChart.addChartScrollbar(chartScrollbar);
156
157 // WRITE
158 this.threadChart.write("threadDiv");
159 },
160
161 /**
162 * RAM Line Chart
163 */
164 drawRAMLineChart:function(){
165
166 this.ramLineChart.pathToImages = "http://www.cnblogs.com/js/amcharts/images/";
167 this.ramLineChart.zoomOutButton = {
168 backgroundColor: '#000000',
169 backgroundAlpha: 0.15
170 };
171 this.ramLineChart.dataProvider = this.chartData;
172 this.ramLineChart.categoryField = "date";
173
174 // AXES
175 // category
176 var categoryAxis = this.ramLineChart.categoryAxis;
177 categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
178 categoryAxis.minPeriod = "ss"; // our data is daily, so we set minPeriod to DD
179 categoryAxis.dashLength = 1;
180 categoryAxis.gridAlpha = 0.15;
181 categoryAxis.axisColor = "#DADADA";
182
183 // value
184 var valueAxis = new AmCharts.ValueAxis();
185 valueAxis.title = " ";
186 valueAxis.axisColor = "#DADADA";
187 valueAxis.dashLength = 1;
188 valueAxis.logarithmic = true; // this line makes axis logarithmic
189 this.ramLineChart.addValueAxis(valueAxis);
190
191 // GRAPH
192 var graph = new AmCharts.AmGraph();
193 graph.type = "smoothedLine";
194 graph.bullet = "round";
195 graph.bulletColor = "#FFFFFF";
196 graph.bulletBorderColor = "#00BBCC";
197 graph.bulletBorderThickness = 2;
198 graph.bulletSize = 7;
199 graph.title = "usedMemory";
200 graph.valueField = "usedMemory";
201 graph.lineThickness = 2;
202 graph.lineColor = "#00BBCC";
203 this.ramLineChart.addGraph(graph);
204
205 // CURSOR
206 var chartCursor = new AmCharts.ChartCursor();
207 chartCursor.cursorPosition = "mouse";
208 this.ramLineChart.addChartCursor(chartCursor);
209 chartCursor.categoryBalloonDateFormat = "HH ";
210
211 // SCROLLBAR
212 var chartScrollbar = new AmCharts.ChartScrollbar();
213 this.ramLineChart.addChartScrollbar(chartScrollbar);
214
215 // WRITE
216 this.ramLineChart.write("ramLineDiv");
217 },
218
219 /**
220 *
221 */
222 flushChart: function(){
223 this.ramChart.validateData();
224 this.threadChart.validateData();
225 this.ramLineChart.validateData();
226 }
227
228 };
229
230
231 $(function(){
232
233 var init = function(){
234 $.ajax({
235 type:"POST",
236 cache:false,
237 url:"http://www.cnblogs.com/isafe/query/ResourceManagementInfo!getMonitorInfo.action",
238 data:null,
239 success:function(data){
240
241 if(null!=data){
242
243 //
244 _809Server_Explorer.threadData.push({
245 generateDate:new Date(),
246 value:data.result["totalThread"]
247 });
248
249 // ， RAM
250 _809Server_Explorer.ramData.pop();
251
252 var num = data.result["usedMemory"]/1024/1024;// GB
253
254 _809Server_Explorer.ramData.push({
255 name:num.toString().substring(0, num.toString().indexOf(".")+3)+'GB',
256 value:num.toString().substring(0, num.toString().indexOf(".")+3),
257 color:"#ff0000"
258 });
259
260 _809Server_Explorer.chartData.push({
261 date: new Date(),
262 usedMemory: num.toString().substring(0, num.toString().indexOf(".")+3)
263 });
264
265 //
266 _809Server_Explorer.flushChart();
267
268 //_809Server_Explorer.osName=data.result["osName"];
269
270 var os_text =$("#osNameValue_lbl");
271 var maxMemory_lbl =$("#maxMemory_lbl");
272
273 if(""==os_text.text() || ""==maxMemory_lbl.text()){
274 os_text.text(data.result["osName"]);
275 maxMemory_lbl.text(Math.ceil(data.result["maxMemory"]/1024/1024)+"GB");
276 }
277 }
278 },
279 dataType:"json"
280 });
281 };
282
283 init();
284
285 //
286 setInterval(function(){
287 init();
288 }, 5000);
289
290 _809Server_Explorer.drawRAMChart();
291 _809Server_Explorer.drawThreadChart();
292 _809Server_Explorer.drawRAMLineChart();
293
294 });이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
amMap 지도 도표 제작 안내지리 정 보 를 바탕 으로 하 는 등급 별 표 시 를 지원 하려 면 중요 하 다.그러나 ammap 와 fusionMap 은 지리 정보 가 없 는 곳 이 있 습 니 다.지리 정보,예 를 들 어 거리,마을 이름 은 고려...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
