实时监控（折线图）

选项：1、jrobin

2、asithappens

3、Extjs

考虑系统先用技术，Extjs3.0的折线图采用flash技术，当然也有纯js+CSS实现的（还没有使用）,效果不错

\<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/lkj107/EntryImages/20091105/监控.gif'/\>

var store_kpi = new Ext.data.JsonStore({
				url : 'monitor.htm?method=queryWithPage&start=0&limit=20',
			fields:[{name:'testStartTime',
    	type:'string'}
    	,
    	{name:'time',
    type:'float'}]});
    
var businessType = new Ext.form.ComboBox({
		mode : 'local',
		editable : false,
		width  :50,
		store : new Ext.data.SimpleStore({
			data : [['AA', 'AA']],
			fields : ['value', 'text']
		}),
		displayField : 'text',
		valueField : 'value',
		mode : 'local',
		triggerAction : 'all'
	});
var city = new Ext.form.ComboBox({
		mode : 'local',
		width  :50,
		editable : false,
		store : new Ext.data.SimpleStore({
			data : [['310', '邯郸'],['311', '石家庄'], ['312', '保定'], ['313', '张家口'], ['314', '承德'], ['315', '唐山'], ['316', '廊坊'], ['317', '沧州'], ['318', '衡水'], ['319', '邢台'], ['335', '秦皇岛']],
			fields : ['value', 'text']
		}),
		displayField : 'text',
		valueField : 'value',
		mode : 'local',
		triggerAction : 'all'
	});
	var kpi_value = new Ext.form.ComboBox({
		mode : 'local',
		width  :60,
		editable : false,
		store : new Ext.data.SimpleStore({
			data : [['BB', 'BB']],
			fields : ['value', 'text']
		}),
		displayField : 'text',
		valueField : 'value',
		mode : 'local',
		triggerAction : 'all'
	});
	var btn_exchange = new Ext.Button({
	text : '切换监控指标',
	handler : function(){store_kpi.load();}
});
var kpi=new Ext.Panel({
        width: 700,
        height: 400,
        region : 'center',
        title: '性能监控',
        tbar: ['业务类型',businessType,new Ext.Toolbar.TextItem(""),'地市',city,new Ext.Toolbar.TextItem(""),'KPI',kpi_value,new Ext.Toolbar.TextItem(""),'-',btn_exchange],
        items: {
            xtype: 'linechart',
            store: store_kpi,
            yField: 'time',
            xField: 'testStartTime',
            xAxis: new Ext.chart.CategoryAxis({
                title: '时间'
            }),
            yAxis: new Ext.chart.NumericAxis({
                title: '时延(秒)'
            }),
            extraStyle: {
               xAxis: {
                    labelRotation: -90
                }
            }
        }
    });
var p_monitor = {
	id : 'monitor-panel',
	border : false,
	layout : 'border',
	items : [kpi]
};
function myMethod(){
	window.setTimeout('myMethod()', 5000000);
	store_kpi.load();
};
myMethod();