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

日期：2011/11/14  来源：Terry

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

在线演示

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

• jQuery sparklines官方网站
• 5个最顶级jQuery图表类库插件-Charting plugin

HTML代码：

<div id="container">
    <div id="logo"></div>
    <div class="desc">
        gbin1.com PV: <span id="pv"></span>
    </div>
    
    <div>
        <a href="#" id="showline">Line</a>
        <a href="#" id="showbar">Bar</a>
    </div>
    
    <div id="pvlinewrap">
        <span id="pvline"></span>
    </div>
    
    <div id="pvbarwrap">
        <span id="pvbar"></span>
    </div>
    
     <div id="trigger"><a href="#" id="loadpage"><u>Click Me !!!</u> to simulate loading gbin1 home page</a></div>
     
     <div id="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, {  '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数据来生成对应图表。对应生成数据如下：

{"pv":643}

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

$("#showline").click(function(){
    $("#pvlinewrap").show();
    $("#pvbarwrap").hide();
});

$("#showbar").click(function(){
    $("#pvlinewrap").hide();
    $("#pvbarwrap").show();
});

$("#loadpage").click(function(e){
    $('#pageloader').load("/index.html #null");
    e.printdefault();
});

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

CSS代码：

#container{
    margin: 100px auto;
    padding: 10px;
    width: 960px;
    font-family: Arial;
    background: url("../images/dark.png");
}

#container span{
    height: 150px;
}

#logo{
    width: 180px;
    height: 120px;
    background: url("../images/logo.png") ;
}

#pv{
    font: 18px "times roman";
    font-weight: bold;
}

.desc{
    background: #303030;
    line-height: 30px;
    width: 250px;
    text-align:center;
    color: #FFF;
    margin: 20px 0px 20px 0px;
}

#trigger a{
    color: #202020;
    font-size: 11px;
    background: url("../images/light.png");
    padding: 10px;
    text-decoration : none;
}


#showline, #showbar{
    background: url("../images/light.png");
    padding: 10px;
    font-size: 10px;
}

#pvlinewrap, #pvbarwrap{
    padding: 35px 0px 35px 0px;
}