使用jQuery圖表插件Sparklines來開發(fā)一個實(shí)用的網(wǎng)站PV(page view)實(shí)時監(jiān)控應(yīng)用

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

jQuery sparklines是一個jQuery的圖表插件，可以幫助你快速構(gòu)建行內(nèi)的小圖表，今天我們將使用Sparklines開發(fā)一個動態(tài)監(jiān)視首頁P(yáng)V變化的應(yīng)用。希望大家能喜歡，并且多多留言！請點(diǎn)擊演示中的"Click ME!!!"，查看動態(tài)PV變化效果。

在線演示

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

jQuery sparklines官方網(wǎng)站
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代碼：

一下代碼用來動態(tài)生成線狀圖和柱狀圖，這里我們使用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);

以上代碼中我們使用遠(yuǎn)程JSON數(shù)據(jù)來生成對應(yīng)圖表。對應(yīng)生成數(shù)據(jù)如下：

{"pv":643}

以上數(shù)據(jù)我們可以使用后臺程序，例如，PHP，JSP，.Net生成對應(yīng)JSON數(shù)據(jù)。

$("#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數(shù)值。

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;
}

posted @ 2011-11-14 18:24 igeekbar 閱讀(1905) 評論(0) 收藏舉報

刷新頁面返回頂部

使用jQuery圖表插件Sparklines來開發(fā)一個實(shí)用的網(wǎng)站PV(page view)實(shí)時監(jiān)控應(yīng)用

公告

中文互聯(lián)： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機(jī)訂閱