使用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