使用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