FLOT+SSH+JQUERY完成实时数据统计报表

直接进入主题：

 要想使用FLOT的 效果需要引入以下JS

<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.min.js">
</script>
<!--[if IE]><script  type="text/javascript" src="/js/excanvas.min.js"></script><![endif]--> //IE无效果时使用
<script type="text/javascript"
src="<%=request.getContextPath()%>/jquery.flot.min.js">
</script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.flot.time.js">//时序图时引用
</script>


<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.numberformatter-1.2.3.min.js">//格式化日期 
</script>


<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.flot.axislabels.js">//FLOT特有标签
</script>

 页面引用完事了 开始 进入 JS 部分

<script type="text/javascript">


var thread = [], weblogic = [];//两条线显示的 内容

var totalPoints = 10; //开始的数据长度

//图形样式

var options= {
    series: {
        lines: {
            lineWidth: 1.2
        },
        bars: {
            align: "center",
            fillColor: { colors: [{ opacity: 1 }, { opacity: 1}] },
            barWidth: 500,
            lineWidth: 1
        }
    },‘

//X轴样式
    xaxis: {
      mode: "time",
        tickSize: [60, "second"],//可以是多种

       //计算时间传进来的数值应该是毫秒
        tickFormatter: function (v, axis) {
            var date = new Date(v);


            if (date.getSeconds() % 20 == 0) {
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
          
                return hours + ":" + minutes            } else {
                return "";
            }
        },
        axisLabel: "Time",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },

//Y轴设置
    yaxes: [
        {
            min: 0,
           
            
        }
    ],
    legend: {
        noColumns: 0,
        position:"nw"
    },

//背景色
    grid: {      
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
    }
};

/页面加载顺序
$(document)
.ready(
function() {

//先初始化
initData('thread');
initData('weblogic');

//传入最开始的数据集
dataset = [ {
label : "线程",
data : thread,
color : "#9BCD9B"
}


];

dataset3 = [ {
label : "WebLogic连接池",
data : weblogic,


color : "#4682B4"
}

];


//绘制图形 
$.plot($("#chartdiv"), dataset, options);

$.plot($("#chartdiv1"), dataset3, options2);
//定时执行方法
window.setInterval(GetData, 60000);


});

//初始化数据的方法此处为 开始显示的折现

function initData(obj) {


//获取历史数据写进集合里
$
.ajax( {
type : "POST",
async : false,
url : "<%=request.getContextPath()%>/quickViewAction!showWebRealChart.action",//后台怎么写的 下边接着写
data : "sid=" + $("#sid").val() + "&chartsign=realtime&sign="
+ obj,
success : function(msg) {


var o = eval("(" + msg + ")");


if (obj == 'thread') {

$.each(o, function(i, item) {
var temp = [ item[0], item[1] ];
thread.push(temp);

                  });
}

                    if(obj == 'weblogic'){

$.each(o, function(i, item) {
var temp = [ item[0], item[1] ];
weblogic.push(temp);


                              });
}

}

});
}

function GetData() {


getRealDate('thread');
getRealDate('session');
getRealDate('jvm');
getRealDate('weblogic');
}

//这是获许实时数据

function getRealDate(obj) {

$
.ajax( {
type : "POST",
async : false,
url : "<%=request.getContextPath()%>/nstl/monitor/quickViewAction!webRealData.action",
data : "sid=" + $("#sid").val() + "&sign=" + obj,
success : function(msg) {

var o = eval("(" + msg + ")");

//获取实时数据时进行更新
                         if(obj=='thread'){
                          
                          var temp=[o.realtime,o.realdata.currentthreadscount]
                          update(obj,temp);
                       
                         }
                     
                         if(obj=='weblogic'){
                          
                          var temp=[o.realtime,o.realdata.activeconnscurrentcount]
                          update(obj,temp);
                       
                        }
}
});
}

//更新数据集
function update(obj, _data) {


if (obj == 'thread') {
thread.shift();//移除第一位的数据重新赋值


thread.push(_data);
}

if (obj == 'weblogic') {
  weblogic.shift();
weblogic.push(_data);


}
dataset = [ {
label : "线程",
data : thread,


color : "#9BCD9B"
}


];
dataset3 = [ {
label : "WebLogic连接池",
data : weblogic,


color : "#4682B4"
}


];

//绘制图形 
$.plot($("#chartdiv"), dataset, options);
$.plot($("#chartdiv1"), dataset3, options1);
   
}

前台部分基本上完成了body下面直接方式两个div 就可以了

后台部分程序：

//只写了相关方法 具体的 其他的大家也都知道

public String webRealData(){


Monitorthreadinfo threadinfo=null;

Monitorjdbcconnpool weblogic=null;


try {
MonitorAppConfig app = (MonitorAppConfig) quickviewService
.getServerNameById(MonitorAppConfig.class, sid);


MonitorHdConfig hd=null;

JSONObject js = new JSONObject();
if (sign.equals("thread")) {

threadinfo = (Monitorthreadinfo) quickviewService.getWebRealData(app, sign,sid,hd);

js.put("realdata", threadinfo);

js.put("realtime", new Date().getTime());


}

if (sign.equals("weblogic")) {


weblogic = (Monitorjdbcconnpool) quickviewService.getWebRealData(app, sign,sid,hd);
js.put("realdata", weblogic);
js.put("realtime", new Date().getTime());
}

PrintWriter writer;
ServletActionContext.getResponse().setCharacterEncoding("utf-8");
writer = ServletActionContext.getResponse().getWriter();
writer.print(js);


} catch (Exception e) {


log.error("" + e);
return ERROR;
}


return null;


}

后台程序相当于查出集合或者对象然后写到JS中