使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用

PS:数据有变动.大家看个原理就okay了~

jQuery sparklines是一个jQuery的图表插件，可以帮助你快速构建行内的小图表，今天我们将使用Sparklines开发一个动态监视首页PV变化的应用。希望大家能喜欢，并且多多留言！请点击演示中的"Click ME!!!"，查看动态PV变化效果。

如果你不知道什么是jQuery sparklines，请查看如下资源：

HTML代码：

<divid="container">
<divid="logo"></div>
<divclass="desc">
gbin1.com PV: <spanid="pv"></span>
</div>
<div>
<ahref="#"id="showline">Line</a>
<ahref="#"id="showbar">Bar</a>
</div>
<divid="pvlinewrap">
<spanid="pvline"></span>
</div>
<divid="pvbarwrap">
<spanid="pvbar"></span>
</div>
<divid="trigger"><ahref="#"id="loadpage"><u>Click Me !!!</u> to simulate loading gbin1 home page</a></div>
<divid="pageloader">
</div>
</div>

Javascript代码：

一下代码用来动态生成线状图和柱状图，这里我们使用setTimeout来每隔一秒生成新的图形。

var mdraw =0;
var mrefreshinterval =1000;
var pvs_max =50;
mdraw =function(){
$.getJSON(
"counter.jsp",
function(json){
pvs.push(json.pv);
if(pvs.length > pvs_max)
pvs.splice(1);
$("#pv").html(json.pv);
}
);
$('#pvline').sparkline(pvs,{ width:'250px', height:'50px', lineColor :'#202020', fillcolor:'false'});
$('#pvbar').sparkline(pvs,{type:'bar', barColor:'black', height:'50px'});
mtimer = setTimeout(mdraw, mrefreshinterval);
}
var mtimer = setTimeout(mdraw, mrefreshinterval);

以上代码中我们使用远程JSON数据来生成对应图表。对应生成数据如下：

以上数据我们可以使用后台程序，例如，PHP，JSP，.Net生成对应JSON数据。

以上代码我们用来分别隐藏柱状图或者线状图，并且使用下方的一个链接模拟加载GBin1.com首页。用以改变PV数值。

CSS代码：

相关推荐