使用plot绘制实时图表

先上图片

 var dataObj = [];
        var dataLength = 60;
        var updateInterval = 3000;
        var options = {
            series: { shadowSize: 0,lines: { show: true },points: { show: true } },
            grid: { hoverable: true},
            yaxis: { min: 0, max: 100 },
            xaxis: { show: false }
        };
        var plot;
        var chartId;
        var serverId;
        var myTimer;
        var previousPoint = null;
        var campArr
        //切换图表
        function switchChart(id){
            if($("#dgrd_course tr").length == 1){ return false; }
            $("div[id$='_DIV']").slideUp();
            $("#"+id+"_DIV").slideDown("fast",function(){
                    $(".headerTr img").attr("src","../Images/tubiao01.gif");
                    $("#"+id).parent().parent().find("img")[0].src = "../Images/tubiao02.gif";
                    chartId = id;
                    var res = getChartData();
                    var war = getWarnData();
                    if(id == "S_CPU"||id == "S_MEMORY"||id=="S_DISK_SYS"||id=="S_DISK_APP"){
                        options.yaxis.max = 100;
                    }else{
                        if(war[0] == undefined){
                            //此为按实时数据最大值计算纵坐标最大高度
                            var arr = $("#INPUT_"+chartId+serverId).val().split("#");
                            var max = Math.max.apply(Math,arr);
                            options.yaxis.max = max*2;
                        }else{
                            //按报警值计算最大高度
                            options.yaxis.max = war[0][1]*2;
                        }
                        
                    }
                    plot = $.plot($("#"+chartId+"_DIV"), [ {color:"#FF0000",label:"报警值",data:war},{color:"#9acd32",label:"实时值",data:res} ], options); 
                    bindHover(chartId+"_DIV");
                    clearTimeout(myTimer);
                    getServerVal();
                });
        }
        //从服务器端获取数据
        function getServerVal(){
            $.get('Mon_mon_info_manager.aspx?ACTION=GETJSON&RND'+(new Date()).getMilliseconds(), function (data) {
                    var dataAjax = $.parseJSON(data);           
                    for(var i=0;i<dataAjax.length;i++){
                        for(var key in dataAjax[i]){
                            var obj = $("#INPUT_"+key+dataAjax[i]["LIST_ID"])
                            var val = obj.val();
                            if(val != undefined){
                                if(val == ""){
                                    obj.val(dataAjax[i][key]);                                        
                                }else{
                                    obj.val(val+"#"+dataAjax[i][key]);
                                }                                    
                                if(dataAjax[i]["LIST_ID"] == serverId){
                                    $("#"+key+"_CUR").text(dataAjax[i][key]);
                                }
                            }
                        }
                    }
                    var res = getChartData();
                    var war = getWarnData();
                    plot.setData([{color:"#FF0000",label:"报警值",data:war},{color:"#9acd32",label:"实时值",data:res}]);
                    plot.draw();
                    myTimer = setTimeout(getServerVal, updateInterval);
                   
            });
        }
        //准备要显示的数据
        function getChartData(){
            var arr = $("#INPUT_"+chartId+serverId).val().split("#").reverse();
            var res = [];
            for(var i=0;i<dataLength-arr.length;++i){
                arr.push(-1);
            }
            arr = arr.reverse();
            for (var i = 0; i < dataLength; ++i){
                res.push([i, arr[arr.length-dataLength+i]])
            }
            return res;
        }
        //获取报警值
        function getWarnData(){
            var res = [];
            for(var i=0;i<campArr.length;i++){
                var subArr = campArr[i].split(">");                         
                if(subArr.length>1 && $.trim(subArr[0]) == chartId){                    
                        res.push([0,$.trim(subArr[1])]);
                        res.push([dataLength-1,res[0][1]]);
                    break;
                }
            }
            return res;
        }
        //鼠标滑上显示提示信息
        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                top: y - 10,
                left: x + 10,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }
        //每个动态生成的点的鼠标滑上事件
        function bindHover(placeId){
           $("#"+placeId).bind("plothover", function (event, pos, item) {
                if (item) {     
                        $("#tooltip").remove();
                        var y = item.datapoint[1].toFixed(2);
                        showTooltip(item.pageX, item.pageY,y);
                }
                else {
                    $("#tooltip").remove();
                }
            });
        }
        //页面载入完成
        $(function(){
            if($("#dgrd_course tr").length > 1){
                 var firstRow = $($("#dgrd_course tr")[1])
                firstRow.click();
                updateInterval = Number($("#TimeOutHF").val())*1000;  
            }          
        }); 
        //服务器列表选中一行
        function selectRow(id,camp){
                if($("tr[id^='" + id + "']").attr("class") == "selected_row"){
                    return false;
                }
                $(".selected_row").attr("class", "TableLine1");
                $("tr[id^='" + id + "']").attr("class", "selected_row");
                serverId = $.trim($(".selected_row").attr("id"));
                campArr = camp.split(" and ");
                switchChart("S_CPU");
        }

　　服务器断代码

    Dim dblTotal1 As Integer = 0
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            If Request("ACTION") = "GETJSON" Then
                GetData()
                Return
            End If
            monManager.resetMonInfo()
            GetCircTime()
            BindGrid()
        End If

    End Sub
    '获取邮件轮训时间
    Public Function GetCircTime() As Integer
        Try
            Dim configManager As New MON.MON.MON_PARAMETER
            Dim configTable As DataTable = configManager.getMonParameter()
            TimeOutHF.Value = configTable.Rows(0)("LOG_CIRC").ToString()
        Catch ex As Exception
            lbl_message.Text = "<IMG src='../images/@warn.gif'>" & ex.Message
            Return -1
        End Try
    End Function

    Public Function BindGrid() As Integer
        Try
            Dim manager As New MON.MON.MON_SERVER_LIST
            Dim tbDetValue As DataTable = manager.getServerListInfo()
            dgrd_course.DataSource = tbDetValue
            dgrd_course.DataBind()

            For Each dr As DataRow In tbDetValue.Rows
                Dim hf As New HiddenField
                hf.ID = "INPUT_S_CPU" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)

                hf = New HiddenField
                hf.ID = "INPUT_S_DISK_APP" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)

                hf = New HiddenField
                hf.ID = "INPUT_S_DISK_SYS" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)

                hf = New HiddenField
                hf.ID = "INPUT_S_MEMORY" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)

                hf = New HiddenField
                hf.ID = "INPUT_S_FLOW_IN" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)

                hf = New HiddenField
                hf.ID = "INPUT_S_FLOW_OUT" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)

                hf = New HiddenField
                hf.ID = "INPUT_S_WEB_PORT" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)

                hf = New HiddenField
                hf.ID = "INPUT_S_SQL_CONNECT" & dr("LIST_ID").ToString()
                Form1.Controls.Add(hf)
            Next

            Return 1
        Catch ex As Exception
            lbl_message.Text = "<IMG src='../images/@warn.gif'>" & ex.Message
            Return -1
        End Try
    End Function
    Public Function GetData() As Integer
        Try
            Dim dt As DataTable = monManager.getMonInfo()
            Dim rs As String = JsonConvert.SerializeObject(dt)
            Response.Write(rs)
            Response.End()
            Return 1
        Catch
            Return 0
        End Try
    End Function
    Protected Sub dgrd_staff2_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgrd_course.ItemDataBound

        If e.Item.ItemIndex < 0 Then
            Return
        End If

        Dim dr As DataRowView = CType(e.Item.DataItem, DataRowView)
        e.Item.Attributes.Add("id", dr.Row("LIST_ID").ToString())
        e.Item.Attributes.Add("onclick", "selectRow('" & dr.Row("LIST_ID").ToString() & "','" & dr.Row("camp") & "');")
        e.Item.Attributes.Add("onmouseover", "SetDataGridBackColor('LightBlue',false);")
        e.Item.Attributes.Add("onmouseout", "SetDataGridBackColor('white',true);")
    End Sub