使用jQuery圖表插件Sparklines來開發一個實用的網站PV(page view)實時監控應用

 原文連接： http://www.gbtags.com/gb/share/5820.htm

在線演示

PS:數據有變更.你們看個原理就okay了~

jQuery sparklines是一個jQuery的圖表插件，能夠幫助你快速構建行內的小圖表，今天咱們將使用Sparklines開發一個動態監視首頁PV變化的應用。但願你們能喜歡，而且多多留言！請點擊演示中的"Click ME!!!"，查看動態PV變化效果。

若是你不知道什麼是jQuery sparklines，請查看以下資源：

• jQuery sparklines官方網站
• 5個最頂級jQuery圖表類庫插件-Charting plugin

HTML代碼：

1. <div id="container">
2. <div id="logo"></div>
3. <div class="desc">
4. gbin1.com PV: <span id="pv"></span>
5. </div>
7. <div>
8. <a href="#" id="showline">Line</a>
9. <a href="#" id="showbar">Bar</a>
10. </div>
12. <div id="pvlinewrap">
13. <span id="pvline"></span>
14. </div>
16. <div id="pvbarwrap">
17. <span id="pvbar"></span>
18. </div>
20. <div id="trigger"><a href="#" id="loadpage"><u>Click Me !!!</u> to simulate loading gbin1 home page</a></div>
22. <div id="pageloader">
24. </div>
25. </div>

 

Javascript代碼：

一下代碼用來動態生成線狀圖和柱狀圖，這裏咱們使用setTimeout來每隔一秒生成新的圖形。 

1. var mdraw = 0;
2. var mrefreshinterval = 1000;
3. var pvs_max = 50;
4. mdraw = function() {
5. $.getJSON(
6. "counter.jsp",
7. function(json) {
8. pvs.push(json.pv);
9. if (pvs.length > pvs_max)
10. pvs.splice(1);
11. $("#pv").html(json.pv);
12.  
13. }
14. );
15. $('#pvline').sparkline(pvs, { width: '250px', height: '50px', lineColor : '#202020', fillcolor: 'false'});
16. $('#pvbar').sparkline(pvs, {type: 'bar', barColor: 'black', height: '50px'} );
17. mtimer = setTimeout(mdraw, mrefreshinterval);
18. }
19. var mtimer = setTimeout(mdraw, mrefreshinterval);

 

以上代碼中咱們使用遠程JSON數據來生成對應圖表。對應生成數據以下：

1. {"pv":643}

 

以上數據咱們能夠使用後臺程序，例如，PHP，JSP，.Net生成對應JSON數據。

1. $("#showline").click(function(){
2. $("#pvlinewrap").show();
3. $("#pvbarwrap").hide();
4. });
5.  
6. $("#showbar").click(function(){
7. $("#pvlinewrap").hide();
8. $("#pvbarwrap").show();
9. });
10.  
11. $("#loadpage").click(function(e){
12. $('#pageloader').load("/index.html #null");
13. e.printdefault();
14. });

 

以上代碼咱們用來分別隱藏柱狀圖或者線狀圖， 而且使用下方的一個連接模擬加載GBin1.com首頁。用以改變PV數值。

CSS代碼：

 

1. #container{
2. margin: 100px auto;
3. padding: 10px;
4. width: 960px;
5. font-family: Arial;
6. background: url("../images/dark.png");
7. }
8.  
9. #container span{
10. height: 150px;
11. }
12.  
13. #logo{
14. width: 180px;
15. height: 120px;
16. background: url("../images/logo.png") ;
17. }
18.  
19. #pv{
20. font: 18px "times roman";
21. font-weight: bold;
22. }
23.  
24. .desc{
25. background: #303030;
26. line-height: 30px;
27. width: 250px;
28. text-align:center;
29. color: #FFF;
30. margin: 20px 0px 20px 0px;
31. }
32.  
33. #trigger a{
34. color: #202020;
35. font-size: 11px;
36. background: url("../images/light.png");
37. padding: 10px;
38. text-decoration : none;
39. }
40.  
41.  
42. #showline, #showbar{
43. background: url("../images/light.png");
44. padding: 10px;
45. font-size: 10px;
46. }
47.  
48. #pvlinewrap, #pvbarwrap{
49. padding: 35px 0px 35px 0px;
50. }

原文連接：http://www.gbtags.com/gb/share/5820.htm