var mongodb = require(“mongodb”);
var fu = require(“./fu”);

Node.js和MongoDB实现简单日志分析系统,node.jsmongodb

在最近的项目中,为了便于分析把项目的日志都存成了JSON格式。之前日志直接存在了文件中,而MongoDB适时闯入了我的视线,于是就把log存进了MongoDB中。log只存起来是没有意义的,最关键的是要从日志中发现业务的趋势、系统的性能漏洞等。之前有一个用Java写的分析模块,运行在Tomcat下。实现相当的重量级,添加一个新指标的流程也比较繁琐,而且由于NFS的原因还导致分析失败。一直想改写,最初想用Ruby
On Rails,可是一直没有时间学习和开发(在找借口啊!)。在杭州QCon
2011上又遇到了Node.js,虽然之前也听说过,但是没有深入研究,听了淘宝苏千
的演讲后,当时了就有要用Node.js实现这个日志分析系统的想法。前端用JS,服务器用JS,就连数据库的Shell都是JS,想想就够酷的——当然最关键是代码量小。

一、用Node.js实现服务器端代码

为了有良好的风格和快速的代码编写,不可避免地应该采用一个简单的框架。Express实现了大部分的功能,可是好需要花一定时间熟悉,并且看起来对这个项目来说有些重量级。在Node.js的官网上有一个聊天的Demo
,这个代码简单移动,封装了对URL的处理和返回JSON。于是我就直接使用了fu.js,重写了server.js:
复制代码 代码如下:
HOST = null; // localhost
PORT = 8001;

var fu = require(“./fu”),
    sys = require(“util”),
    url = require(“url”),
    mongo = require(“./request_handler”);

fu.listen(Number(process.env.PORT || PORT), HOST);

fu.get(“/”, fu.staticHandler(“index.html”));

太简单了吧?!不过的确是这样,一个服务器已经建立起来了。
下面看处理请求的request_handler.js代码:
复制代码 代码如下:
var mongodb = require(“mongodb”);
var fu = require(“./fu”);

// TOP 10 user Action
fu.get(“/userActionTop10”, function(req, res){
  mongodb.connect(‘mongodb://localhost:27017/log’, function(err,
conn){
    conn.collection(‘action_count’, function(err, coll){
     
coll.find({“value.action”:{$in:user_action}}).sort({“value.count”:-1}).limit(10).toArray(function(err,
docs){
        if(!err){
          var action = [];
          var count = [];
          for(var i = 0; i < docs.length; i ++){
            //console.log(docs[i]);
            action.push(docs[i].value.action);
            count.push(docs[i].value.count);
          }
          res.simpleJSON(200, {action:action, count:count});
        
          // 一定要记得关闭数据库连接
          conn.close();
        }
      });
    });
  });
});

二、客户端

日志系统的最重要的是可视化显示,这里使用了JQuery的一个插件jqPlot Chart
。首先使用一个静态的HTML页面,用来作为图形显示的容器:
复制代码 代码如下:
<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″>
    <title>Rendezvous Monitor System</title>
    <!–[if lt IE 9]><script
src=”js/excanvas.js”><![endif]–>
    <script src=”js/jquery.min.js”></script>
    <script src=”js/jquery.jqplot.min.js”></script>
    <script
src=”js/plugins/jqplot.barRenderer.min.js”></script>
    <script
src=”js/plugins/jqplot.categoryAxisRenderer.min.js”></script>
    <script
src=”js/plugins/jqplot.canvasTextRenderer.min.js”></script>
    <script
src=”js/plugins/jqplot.canvasAxisTickRenderer.min.js”></script>
    <script
src=”js/plugins/jqplot.canvasAxisLabelRenderer.min.js”></script>
    <script
src=”js/plugins/jqplot.pointLabels.min.js”></script>
    <script
src=”js/plugins/jqplot.dateAxisRenderer.min.js”></script>
    <script src=”js/plugins/jqplot.json2.min.js”></script>
    <link rel=”stylesheet” href=”js/jquery.jqplot.min.css”>
    <link rel=”stylesheet” href=”style/base.css”>
    <script src=”js/charts.js”></script>
  </head>
  <body>
  </body>
</html>

几乎是jqPlot的示例中的完整拷贝,好吧,我承认我太懒了。
下面是看用来显示生成图形的chart.js:
复制代码 代码如下:
// Store all chart drawing function, if we want to disable one chart,
only need
// comment the push line when putting fucntion into the array.
var draws = [];

/****************************** TOP 10
User Action Start
*********************************/
document.write(‘<div id=”userActionTop10Chart”></div>’);

var drawUserActionTop10Chart = function(){
  if(!$(“#userActionTop10Chart”).attr(‘class’)){
    $(“#userActionTop10Chart”).attr(‘class’, ‘small_chart’);
  }

  $.ajax({
    async:false,
    url: ‘/userActionTop10’,
    dataType:’json’,
    cache: false,
    success:function(data){
      try{
        $(‘#userActionTop10Chart’).html(”);

        $.jqplot(‘userActionTop10Chart’, [data.count], {
          title: “TOP 10 User Action”,
          seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true},
            pointLabels: {
              show:true,
              ypadding:1
            }
          },
          axesDefaults:{
            tickRenderer:$.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
              angle: -30,
              fontSize: ’12px’
            }
          },
          axes: {
            xaxis: {
              renderer: $.jqplot.CategoryAxisRenderer,
              ticks: data.action
            },
            yaxis: {
              pad: 1.05
            }
          }
        });
      }catch(e){
        //alert(e.message);
      }
    }
  });
}

draws.push(‘drawUserActionTop10Chart’);

/******************************* TOP 10
User Action End
************************************/

/*********** Chart Start *****************/

//Put your chart drawing function here
//1. insert a div for the chart
//2. implement the function drawing chart
//3. push the function name into the array draws

/*********** Chart End
*******************/

// Draw all charts
var drawAllCharts = function(){
  for(var i = 0; i < draws.length; i ++){
    eval(draws[i] + “()”);
  }

 //Recall itself in 5 minute.
 window.setTimeout(drawAllCharts, 5 * 60 * 1000);
}

//
$(function(){
  drawAllCharts();
});

服务器端和客户端的代码都有了,那就跑起来看效果吧:

图片 1

好像忘了什么?日志的分析代码。

三、使用MongoDB 增量式MapReduce实现日志分析

在MongoDB的文档中有关于Incremental
MapReduce的介绍。刚开始一直以为MongoDB实现Streaming处理,可以自动执行增量式的MapReduce。最后发现原来是我理解有误,文档里并没有写这一点,只是说明了如何设置才能增量执行MapReduce。

为了方便,我把MapReduce使用MongoDB的JavaScript写在了单独的js文件中,然后通过crontab定时执行。stats.js的代码:
复制代码 代码如下:
/************** The file is executed per 5 minutes by
/etc/crontab.*****************/
var action_count_map = function(){
  emit(this.action, {action:this.action, count:1});
}

var action_count_reduce = function(key, values){
  var count = 0;
  values.forEach(function(value){
    count += value.count;
  });
  return {action:key, count : count};
}

db.log.mapReduce(action_count_map, action_count_reduce, {query :
{‘action_count’ : {$ne:1}},out: {reduce:’action_count’}});

db.log.update({‘action_count’:{$ne:1}}, {$set:{‘action_count’:1}},
false, true);

 思路很简单:

  1. 在map中将每个action访问次数设为1
  2. reduce中,统计相同action的访问次数
    3.
    执行mapReduce。指定了查询为‘action_count’不等于1,也就是没有执行过该统计;将结果存储在‘action_count’集合,并且使用reduce选项表示该结果集作为下次reduce的输入。
    4.
    在当前所有日志记录设置’action_count’的值为1,表示已经执行过该统计。不知道这种是否会造成没有还没有统计过的记录也被更新??望有经验的大侠赐教!

定时执行stats.js的shell:
复制代码 代码如下:
*/5 * * * * root cd /root/log; mongo localhost:27017/log stats.js

好了,这就是全部的代码,没有什么特别玄妙的地方,不过Node.js真的是个好东西。

在最近的项目中,为了便于分析把项目的日志都存成了JSON格式。之前日志直接存在了文件…

配置柱状图

由最简单的线形图加上一些设置后,能够使图表丰富起来。

相同的。柱状图也能够做一些配置。并且配置的方式与线形图差点儿没有区别。

再来看一个演示样例:

[html] view
plaincopy

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=”utf-8″ />  
  5.         <title>给柱状图配置属性</title>  
  6.         <link rel=”stylesheet” type=”text/css” href=”js/jqPlot/1.0.4/jquery.jqplot.min.css”/>  
  7.         <style type=”text/css”>  
  8.             .chart-title{  
  9.                 background-color: #999999;  
  10.                 margin-bottom: 10px;  
  11.                 line-height: 30px;  
  12.                 padding-left: 10px;  
  13.                 background-color: #efefef;  
  14.                 border-bottom:1px solid #dddddd;  
  15.                 font-weight: bold;  
  16.             }  
  17.                
  18.             #chart1{  
  19.                 border: 1px solid #dddddd;  
  20.             }  
  21.         </style>  
  22.         <!–[if lt IE 9]>  
  23.             <script language=”javascript” type=”text/javascript” src=”js/jqPlot/1.0.4/excanvas.js”></script>  
  24.         <![endif]–>  
  25.         <script src=”;  
  26.         <script src=”js/jqPlot/1.0.4/jquery.jqplot.min.js” type=”text/javascript”></script>  
  27.         <!– jqplot.barRenderer.min.js为$.jqplot.BarRenderer渲染器所在JS文件 –>  
  28.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js” type=”text/javascript” ></script>  
  29.         <!– jqplot.categoryAxisRenderer.min.js用于控制X轴标签的展示渲染 –>  
  30.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.categoryAxisRenderer.min.js” type=”text/javascript” ></script>  
  31.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js” type=”text/javascript”></script>  
  32.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js” type=”text/javascript”></script>  
  33.         <script type=”text/javascript” charset=”utf-8″>  
  34.             $(function(){  
  35.                 $.jqplot(‘chart1’, [[75, 62, 96, 81], [46, 82, 70, 92], [58, 33, 82, 88]], {  
  36.                     title:{         // 标题属性  
  37.                         text:'<div class=”chart-title”>2013年各季度广告位投放数量对照图(非真实数据)<div>’,// 标题文本  
  38.                         show:true,              // 是否阴影  
  39.                         fontFamily:’微软雅黑’,  // 标题字体   
  40.                         fontSize:14,            // 标题字体大小  
  41.                         textAlign:’left’,       // 标题对齐方式  
  42.                         textColor:’#515151′,    // 标题颜色(也能够写作属性color)  
  43.                         escapeHtml:false        // 是否转义HTML字符,值为false时,能够在text属性中使用HTML代码  
  44.                     },  
  45.                     seriesDefaults:{  
  46.                         renderer:$.jqplot.BarRenderer,  
  47.                         pointLabels: {  // 显示数据点,依赖于jqplot.pointLabels.min.js文件  
  48.                             show: true  
  49.                         },  
  50.                         showLabel:true  
  51.                     },  
  52.                     series:[        // 详细数据序列属性  
  53.                         {  
  54.                             color:’#FF6666′,  
  55.                             label:’CPC’  
  56.                         },{  
  57.                             color:’#0066CC’,  
  58.                             label:’CPT’  
  59.                         },{  
  60.                             color:’#99CC66′,  
  61.                             label:’CPM’  
  62.                         }  
  63.                     ],  
  64.                     axesDefaults:{  // 默认坐标轴属性    
  65.                         min:0,  
  66.                         tickOptions:{  
  67.                             showMark:false  
  68.                         }  
  69.                     },  
  70.                     axes:{          // 详细坐标轴属性  
  71.                         xaxis:{  
  72.                             renderer: $.jqplot.CategoryAxisRenderer,  
  73.                             ticks:[‘第一季度’, ‘第二季度’, ‘第三季度’, ‘第四季度’],  
  74.                             label:’季度’  
  75.                         },  
  76.                         yaxis: {  
  77.                             label: ‘投放数量’  
  78.                         }  
  79.                     },  
  80.                     legend:{        // 图例属性  
  81.                         show:true,  
  82.                         placement: ‘outsideGrid’ // 设置图例位于图表外部  
  83.                     }  
  84.                 });  
  85.             });  
  86.         </script>  
  87.     </head>  
  88.     <body>  
  89.         <div id=”chart1″ style=”width: 800px;height: 400px;”>  
  90.             <!– 
  91.                 描写叙述:图表展示区域 
  92.             –>  
  93.         </div>  
  94.     </body>  
  95. </html>  

效果例如以下:

图片 2

复制代码 代码如下:

柱状图

在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图。通过查看源码。我们也能够看出,线形图是jqPlot默认的图表类型:

[javascript] view
plaincopy

  1. /** 
  2.  * Class: Series 
  3.  * An individual data series object.  Cannot be instantiated directly, but created 
  4.  * by the Plot oject.  Series properties can be set or overriden by the  
  5.  * options passed in from the user. 
  6.  */  
  7. function Series(options) {  
  8.     // …其他设置  
  9.     // prop: renderer  
  10.     // A class of a renderer which will draw the series,   
  11.     // see <$.jqplot.LineRenderer>.  
  12.     this.renderer = $.jqplot.LineRenderer;  
  13.     // …其他设置  
  14. }  

由上面的源代码也能够看出,jqPlot在设置图表类型时,用到了renderer属性。这个属性是为图表的数据序列设置一个渲染器,渲染器决定怎样渲染图表的数据序列。因此,相应于最简单的线形图,我们仅仅须要设置相应的数据序列渲染器,就能够绘制出最简单的柱状图。完整源代码例如以下:

[html] view
plaincopy

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=”utf-8″ />  
  5.         <title>最简单的柱状图</title>  
  6.         <link rel=”stylesheet” type=”text/css” href=”js/jqPlot/1.0.4/jquery.jqplot.min.css”/>  
  7.         <!–[if lt IE 9]>  
  8.             <script language=”javascript” type=”text/javascript” src=”js/jqPlot/1.0.4/excanvas.js”></script>  
  9.         <![endif]–>  
  10.         <script src=”js/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>  
  11.         <script src=”js/jqPlot/1.0.4/jquery.jqplot.min.js” type=”text/javascript”></script>  
  12.         <!– jqplot.barRenderer.min.js为$.jqplot.BarRenderer渲染器所在JS文件 –>  
  13.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js” type=”text/javascript” ></script>  
  14.         <script type=”text/javascript” charset=”utf-8″>  
  15.             $(function(){  
  16.                 $.jqplot(‘chart1’, [[75, 62, 96, 81, 77, 83, 70]], {  
  17.                     seriesDefaults:{  
  18.                         renderer:$.jqplot.BarRenderer   // 设置数据序列渲染器  
  19.                     }  
  20.                 });  
  21.             });  
  22.         </script>  
  23.     </head>  
  24.     <body>  
  25.         <div id=”chart1″ style=”width: 800px;height: 400px;”>  
  26.             <!– 
  27.                 描写叙述:图表展示区域 
  28.             –>  
  29.         </div>  
  30.     </body>  
  31. </html>  

来看一下效果图:

图片 3

var action_count_reduce = function(key, values){
  var count = 0;
  values.forEach(function(value){
    count += value.count;
  });
  return {action:key, count : count};
}

其他图表类型

图表一般用于展示统计数据结果。提升数据可读性。

图表能够分为非常多种类型,不同的类型展示的效果不一样。比方线形图的数据以一条曲线展示,而柱状图的数据则以多个柱形展示。不同类型的图表用途也有差别。线形图显然适合展示数据的变化趋势,柱状图则适合用于对数据进行对照,还有饼状图适合观察不同选项占比,等等。

通过对线形图和柱状图的学习,我们能够联想到。不同类型的图表,在jqPlot中。最大的差异在于渲染器。通过不同的渲染器,我们就能得到不同的展示效果。当然,它们之间也会有一些不同的配置。只是我们都能够通过文档或源代码去查看该怎样配置一个图表。

以下是一些比較经常使用的图表类型及演示样例代码。

  • 饼状图。饼状图相应的数据序列渲染器为$.jqplot.PieRenderer。与线形图、柱状图不同的是,饼状图的数据格式是一个三维数组。

[html] view
plaincopy

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=”utf-8″ />  
  5.         <title>饼状图</title>  
  6.         <link rel=”stylesheet” type=”text/css” href=”js/jqPlot/1.0.4/jquery.jqplot.min.css”/>  
  7.         <style type=”text/css”>  
  8.             .chart-title{  
  9.                 background-color: #999999;  
  10.                 margin-bottom: 10px;  
  11.                 line-height: 30px;  
  12.                 padding-left: 10px;  
  13.                 background-color: #efefef;  
  14.                 border-bottom:1px solid #dddddd;  
  15.                 font-weight: bold;  
  16.             }  
  17.                
  18.             #chart1{  
  19.                 border: 1px solid #dddddd;  
  20.             }  
  21.         </style>  
  22.         <!–[if lt IE 9]>  
  23.             <script language=”javascript” type=”text/javascript” src=”js/jqPlot/1.0.4/excanvas.js”></script>  
  24.         <![endif]–>  
  25.         <script src=”js/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>  
  26.         <script src=”js/jqPlot/1.0.4/jquery.jqplot.min.js” type=”text/javascript”></script>  
  27.         <!– jqplot.pieRenderer.min.js为饼状图渲染器所在JS文件 –>  
  28.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.pieRenderer.min.js” type=”text/javascript” ></script>  
  29.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js” type=”text/javascript”></script>  
  30.         <script type=”text/javascript” charset=”utf-8″>  
  31.             $(function(){  
  32.                 $.jqplot(‘chart1’, [[[‘活多’, 31], [‘钱少’, 92], [‘家远’, 50], [‘位低’, 40], [‘权轻’, 44], [‘任重’, 66]]], {  
  33.                     title:{         // 标题属性  
  34.                         text:'<div class=”chart-title”>不想上班的理由<div>’,// 标题文本  
  35.                         show:true,              // 是否阴影  
  36.                         fontFamily:’微软雅黑’,  // 标题字体   
  37.                         fontSize:14,            // 标题字体大小  
  38.                         textAlign:’left’,       // 标题对齐方式  
  39.                         textColor:’#515151′,    // 标题颜色(也能够写作属性color)  
  40.                         escapeHtml:false        // 是否转义HTML字符。值为false时。能够在text属性中使用HTML代码  
  41.                     },  
  42.                     seriesDefaults:{  
  43.                         renderer:$.jqplot.PieRenderer,  
  44.                         rendererOptions:{  
  45.                             showDataLabels:true  
  46.                         },  
  47.                         pointLabels: {  // 显示数据点。依赖于jqplot.pointLabels.min.js文件  
  48.                             show: true  
  49.                         }  
  50.                     },  
  51.                     grid:{  
  52.                         drawBorder:false,  
  53.                         shadow:false,  
  54.                         background:’transparent’  
  55.                     },  
  56.                     legend:{        // 图例属性  
  57.                         show:true,  
  58.                         placement: ‘outsideGrid’ // 设置图例位于图表外部  
  59.                     }  
  60.                 });  
  61.             });  
  62.         </script>  
  63.     </head>  
  64.     <body>  
  65.         <div id=”chart1″ style=”width: 400px;height: 400px;”>  
  66.             <!– 
  67.                 描写叙述:图表展示区域 
  68.             –>  
  69.         </div>  
  70.     </body>  
  71. </html>  

效果图:

图片 4

  • 环形图。环形图与饼状图的差别仅仅是在于渲染器的不同。仅仅须要将与饼状图渲染器有关的代码。改动为环形图相应的渲染器代码。就能够将一个饼状图转变为环形图。环形图渲染器为$.jqplot.DonutRenderer,以下是完整的环形图演示样例代码:

[html] view
plaincopy

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=”utf-8″ />  
  5.         <title>环形图</title>  
  6.         <link rel=”stylesheet” type=”text/css” href=”js/jqPlot/1.0.4/jquery.jqplot.min.css”/>  
  7.         <style type=”text/css”>  
  8.             .chart-title{  
  9.                 background-color: #999999;  
  10.                 margin-bottom: 10px;  
  11.                 line-height: 30px;  
  12.                 padding-left: 10px;  
  13.                 background-color: #efefef;  
  14.                 border-bottom:1px solid #dddddd;  
  15.                 font-weight: bold;  
  16.             }  
  17.                
  18.             #chart1{  
  19.                 border: 1px solid #dddddd;  
  20.             }  
  21.         </style>  
  22.         <!–[if lt IE 9]>  
  23.             <script language=”javascript” type=”text/javascript” src=”js/jqPlot/1.0.4/excanvas.js”></script>  
  24.         <![endif]–>  
  25.         <script src=”js/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>  
  26.         <script src=”js/jqPlot/1.0.4/jquery.jqplot.min.js” type=”text/javascript”></script>  
  27.         <!– jqplot.donutRenderer.min.js为环形图渲染器所在JS文件 –>  
  28.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.donutRenderer.min.js” type=”text/javascript” ></script>  
  29.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js” type=”text/javascript”></script>  
  30.         <script type=”text/javascript” charset=”utf-8″>  
  31.             $(function(){  
  32.                 $.jqplot(‘chart1’, [[[‘活多’, 31], [‘钱少’, 92], [‘家远’, 50], [‘位低’, 40], [‘权轻’, 44], [‘任重’, 66]]], {  
  33.                     title:{         // 标题属性  
  34.                         text:'<div class=”chart-title”>不想上班的理由<div>’,// 标题文本  
  35.                         show:true,              // 是否阴影  
  36.                         fontFamily:’微软雅黑’,  // 标题字体   
  37.                         fontSize:14,            // 标题字体大小  
  38.                         textAlign:’left’,       // 标题对齐方式  
  39.                         textColor:’#515151′,    // 标题颜色(也能够写作属性color)  
  40.                         escapeHtml:false        // 是否转义HTML字符,值为false时,能够在text属性中使用HTML代码  
  41.                     },  
  42.                     seriesDefaults:{  
  43.                         renderer:$.jqplot.DonutRenderer,  
  44.                         rendererOptions:{  
  45.                             showDataLabels:true  
  46.                         },  
  47.                         pointLabels: {  // 显示数据点,依赖于jqplot.pointLabels.min.js文件  
  48.                             show: true  
  49.                         }  
  50.                     },  
  51.                     grid:{  
  52.                         drawBorder:false,  
  53.                         shadow:false,  
  54.                         background:’transparent’  
  55.                     },  
  56.                     legend:{        // 图例属性  
  57.                         show:true,  
  58.                         placement: ‘outsideGrid’ // 设置图例位于图表外部  
  59.                     }  
  60.                 });  
  61.             });  
  62.         </script>  
  63.     </head>  
  64.     <body>  
  65.         <div id=”chart1″ style=”width: 400px;height: 400px;”>  
  66.             <!– 
  67.                 描写叙述:图表展示区域 
  68.             –>  
  69.         </div>  
  70.     </body>  
  71. </html>  

效果图:

图片 5

  • 仪表盘。

    仪表盘的数据序列仅仅有一个数值,用于指示指针所在位置。仪表盘数据序列的渲染器位于jqplot.meterGaugeRenderer.min.js文件里,为$.jqplot.MeterGaugeRenderer。来看完整的仪表盘图表代码:

[html] view
plaincopy

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset=”utf-8″ />  
  5.         <title>仪表盘</title>  
  6.         <link rel=”stylesheet” type=”text/css” href=”js/jqPlot/1.0.4/jquery.jqplot.min.css”/>  
  7.         <style type=”text/css”>  
  8.             .chart-title{  
  9.                 background-color: #999999;  
  10.                 margin-bottom: 10px;  
  11.                 line-height: 30px;  
  12.                 padding-left: 10px;  
  13.                 background-color: #efefef;  
  14.                 border-bottom:1px solid #dddddd;  
  15.                 font-weight: bold;  
  16.             }  
  17.                
  18.             #chart1{  
  19.                 border: 1px solid #dddddd;  
  20.             }  
  21.         </style>  
  22.         <!–[if lt IE 9]>  
  23.             <script language=”javascript” type=”text/javascript” src=”js/jqPlot/1.0.4/excanvas.js”></script>  
  24.         <![endif]–>  
  25.         <script src=”js/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>  
  26.         <script src=”js/jqPlot/1.0.4/jquery.jqplot.min.js” type=”text/javascript”></script>  
  27.         <!– jqplot.meterGaugeRenderer.min.js为仪表盘渲染器JS文件 –>  
  28.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.meterGaugeRenderer.min.js” type=”text/javascript” ></script>  
  29.         <script src=”js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js” type=”text/javascript”></script>  
  30.         <script type=”text/javascript” charset=”utf-8″>  
  31.             $(function(){  
  32.                 $.jqplot(‘chart1’, [[75]], {  
  33.                     title:{         // 标题属性  
  34.                         text:'<div class=”chart-title”>当前行驶速度<div>’,// 标题文本  
  35.                         show:true,              // 是否阴影  
  36.                         fontFamily:’微软雅黑’,  // 标题字体   
  37.                         fontSize:14,            // 标题字体大小  
  38.                         textAlign:’left’,       // 标题对齐方式  
  39.                         textColor:’#515151′,    // 标题颜色(也能够写作属性color)  
  40.                         escapeHtml:false        // 是否转义HTML字符,值为false时。能够在text属性中使用HTML代码  
  41.                     },  
  42.                     seriesDefaults:{  
  43.                         renderer: $.jqplot.MeterGaugeRenderer,// 仪表盘渲染器  
  44.                         rendererOptions:{  
  45.                             showDataLabels:true,  
  46.                             min:0,  
  47.                             max:120,  
  48.                             labelHeightAdjust:-5,  
  49.                             ticks: [0, 20, 40, 60, 80, 100, 120],  
  50.                             labelPosition:’bottom’,  
  51.                             intervals:[40, 80, 120],   //取2,3,4这三个刻度值作为分隔线;该值的取定须參照表盘刻度值范围而定  
  52.                             intervalColors:[‘#66cc66’, ‘#E7E658’, ‘#cc6666’],  //分别为上面分隔的域指定表示的颜色  
  53.                             label: ‘时速:公里/小时’  
  54.                                
  55.                         }  
  56.                     },  
  57.                     grid:{  
  58.                         drawBorder:false,  
  59.                         shadow:false,  
  60.                         background:’transparent’  
  61.                     }  
  62.                 });  
  63.             });  
  64.         </script>  
  65.     </head>  
  66.     <body>  
  67.         <div id=”chart1″ style=”width: 400px;height: 400px;”>  
  68.             <!– 
  69.                 描写叙述:图表展示区域 
  70.             –>  
  71.         </div>  
  72.     </body>  
  73. </html>  

效果图:

图片 6

您可能感兴趣的文章:

  • node.js操作mongoDB数据库示例分享
  • Node.js中使用mongoskin操作mongoDB实例
  • AngularJS + Node.js +
    MongoDB开发的基于高德地图位置的通讯录
  • 安装使用Mongoose配合Node.js操作MongoDB的基础教程
  • 了不起的node.js读书笔记之mongodb数据库交互
  • node.js连接mongoDB数据库
    快速搭建自己的web服务
  • 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
  • node.js操作mongodb简单示例分享

图片 7

fu.get(“/”, fu.staticHandler(“index.html”));

//Put your chart drawing function here
//1. insert a div for the chart
//2. implement the function drawing chart
//3. push the function name into the array draws

db.log.mapReduce(action_count_map, action_count_reduce, {query :
{‘action_count’ : {$ne:1}},out: {reduce:’action_count’}});

为了方便,我把MapReduce使用MongoDB的JavaScript写在了单独的js文件中,然后通过crontab定时执行。stats.js的代码:

// Store all chart drawing function, if we want to disable one chart,
only need
// comment the push line when putting fucntion into the array.
var draws = [];

日志系统的最重要的是可视化显示,这里使用了JQuery的一个插件jqPlot
Chart。首先使用一个静态的HTML页面,用来作为图形显示的容器:

几乎是jqPlot的示例中的完整拷贝,好吧,我承认我太懒了。
下面是看用来显示生成图形的chart.js:

定时执行stats.js的shell:

好像忘了什么?日志的分析代码。

复制代码 代码如下:

fu.listen(Number(process.env.PORT || PORT), HOST);

复制代码 代码如下:

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注