使用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, { 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数据来生成对应图表。对应生成数据如下：

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

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

6款jQuery图表插件
图表应用能让数据显示更加直观易懂,但光靠CSS +Xhtml 或纯图片实现的图表显然有很多局限性,强大的jquery 让我们可以实现各种很强大的图表,下面是6款jQuery图表插件 ,另外,你也许也愿 ...
一款可定制的外国jQuery图表插件jqplot
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...
jQuery 图表插件 jqChart 使用
jQuery 图表插件 jqChart显示效果效果非常好.支持以下几种图表: Area Bar Bubble Column Financial Chart - Candlestick Financia ...
JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤第一步 ...
用python快速开发一个实用的socket服务器
用python快速开发一个实用的socket服务器 - 吴尔平 - 博客园用python快速开发一个实用的socket服务器首先,要明白不是所有的socket服务都需要高性能.如果要求高性能,使用 ...
开发一个电商网站大概多少钱
开发一个电商网站会因为系统功能.开发商.硬件等因素影响电商网站开发报价.每一个影响电商网站开发费用的介绍,如下: 与功能需求有关电商平台开发费用需要知道所有的网站在建设出来之后都应该掌握好其功能才能 ...
php做网站步骤_新手如何用PHP开发一个完整的网站？
1.PHPer应具备的知识 (1)PHP知识: 熟练掌握基础函数,PHP语句(条件.循环),数组(排序.读取),函数(内部构造),运算(数学逻辑),面向对象(继承接口封装多态静态属性)等. ...
【如何独自开发一个应用或网站？成本预算是多少？】
下面是一个基本的步骤和估算成本的方法: 需求分析和规划:确定您的产品功能和目标受众,制定详细的需求和功能列表. 设计阶段:根据需求,设计用户界面.数据库结构和系统架构. 开发阶段:编写代码,实现各个功 ...
所谓 jQuery 插件，怎样开发一个 jQuery 插件
简单来说,所谓 jQuery 插件就是扩展在 jQuery 原型对象上的一个方法.通过扩展 jQuery 对象,每次调用 jQuery 对象的时候,对象里面都包含了我们自己所添加的那个方法. 一般插件 ...

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

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

最新文章

热门文章