As shown in the picture, each five-second diagram will be moved once (in fact, a redraw of the picture) to display the monitored CPU information.
The Pastcpuinfomation function is mainly used to display a line chart
The Updatecpupic function removes the figure 5 seconds ago and then draws a picture from the existing data.
The Updatecpuinfomation function adds the newest point to the array that stores the polyline
Then in the interface to get two timers, let them perform a updatecpupic every 5 seconds, every 1 minutes to perform a updatecpuinfomation, the picture is moving.
PS: The code to perform a lot of operations in the server before the server to get the current time, Ajax write a bit messy, I do not know the rules, the implementation of the dynamic diagram is not too good, it is best to directly update the data of the line, I hope friends a lot of advice! The code for the drawing table has been marked red (30 to 60 lines)
Copy Code code as follows:
var past_cpu_service_statistics_line = new Array ();
var plot;
function Pastcpuinfomation () {
Historical CPU Data
local time
$.ajax ({
Type: "POST",
ContentType: "Application/x-www-form-urlencoded;charset=utf-8",
Url:globalObj.path + '/server/getservercurrenttime.htm ',
Success:function (currenttime) {
Console.log ("Take to Server Time" +currenttime);
Get Historical CPU Data
$.ajax ({
Type: "POST",
ContentType: "Application/x-www-form-urlencoded;charset=utf-8",
Url:globalObj.path + '/server/getpastcpumonitordata.htm ',
StartTime Endtime is pseudo data, time is acquired in the background
Data: "Hostname=" + "login.cheos.cn",
Success:function (Result) {
For (key in result) {
To get time to convert to int
var intkey = parseint (key);
var transfertime = new Date (Intkey);
Console.log ("Transfertime:" + key + "----Resut:" + transfertime);
var onePoint = [Transfertime, Result[key]];
Past_cpu_service_statistics_line.push (OnePoint);
}
<span style= "color: #ff0000;" >//Historical CPU situation table
plot= $.jqplot (' cpuhistory ', [Past_cpu_service_statistics_line],
{
Axes: {
Xaxis: {
Label: ' Time ',
Renderer: $.jqplot. Dateaxisrenderer,
Tickoptions: {
formatstring: '%y-% #m-%d%h:%m '
},
Min: (currentTime-1000 * 60 * 60),
Max: (currenttime),
Minimum value shown in horizontal (vertical) coordinates
Ticks:[']
},
YAxis: {
Label: ' CPU monitoring ',
}
},
Highlighter: {
Show:true,
sizeadjust:7.5
},
Cursor: {
Show:false
}
});
</span>
},
Error:function (textstatus) {
Alert ("Failed to get monitoring information!");
}
});
Get historical CPU Data Ajax end
},
Error:function (textstatus) {
Alert ("Failed to get server time when retrieving historical CPU data!");
}
});
}
function Updatecpupic () {
Console.log ("Updating CPU View");
First get the server time to draw the horizontal axis
$.ajax ({
Type: "POST",
ContentType: "Application/x-www-form-urlencoded;charset=utf-8",
Url:globalObj.path + '/server/getservercurrenttime.htm ',
Success:function (Result) {
var intkey =parseint (Result);
var transfertime = new Date (Intkey);
Console.log ("Get to Server time:" +result+ "------" +transfertime);
Action Chart
If the diagram already exists, destroy the
if (plot) {
Plot.destory ();
$ ("#cpuHistory"). Unbind ();
$ ("#cpuHistory"). empty ();
plot= null;
}
Re-draw a chart
plot= $.jqplot (' cpuhistory ', [Past_cpu_service_statistics_line], {
Axes: {
Xaxis: {
Label: ' Time ',
Renderer: $.jqplot. Dateaxisrenderer,
Tickoptions: {
formatstring: '%y-% #m-%d%h:%m '
},
Min: (result-1000 * 60 * 60),
Max: (Result),
Minimum value shown in horizontal (vertical) coordinates
Ticks:[']
},
YAxis: {
Label: ' CPU monitoring ',
}
},
Highlighter: {
Show:true,
sizeadjust:7.5
},
Cursor: {
Show:false
},
Replot: {
Resetaxes:true
}
});
},
Error:function (textstatus) {
Alert ("Get server time failed!");
}
});
}
function Updatecpuinfomation () {
$.ajax ({
Type: "POST",
ContentType: "Application/x-www-form-urlencoded;charset=utf-8",
Url:globalObj.path + '/server/getlatestcpumonitordata.htm ',
Data: "Hostname=" + "login.cheos.cn",
Success:function (Result) {
Update Data once
For (key in result) {
var intkey = parseint (key);
var transfertime = new Date (Intkey);
Console.log ("----------------Update CPU Information---:" + key + "----Update time:" + transfertime);
var onePoint = [Transfertime, Result[key]];
Past_cpu_service_statistics_line.push (OnePoint);
}
Update chart
Updatecpupic ();
},
Error:function (textstatus) {
Alert ("Failed to update CPU information!");
}
});
}
