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
4000
(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中