The effect is as shown in the figure. The picture will move every five seconds (actually a new picture is drawn), which can display the monitored CPU information.
The pastCpuInfomation function is mainly used to display a line chart
The updateCpuPic function removes the picture from 5 seconds ago and draws a new picture based on the existing data.
The updateCpuInfomation function adds the latest points to the array storing polylines.
Then set up two timers in the interface and ask them to execute updateCpuPic every 5 seconds and updateCpuInfomation every 1 minute, and the pictures will start to move.
PS: Before performing many operations in the code, the current time of the server will be obtained from the server. The ajax writing is a bit messy, and I don’t know if it is standardized. The method of implementing dynamic graphics does not seem to be very good. It is best to update it directly. Line data, I hope friends can give me some advice! The code for drawing the table has been marked in red (line 30 to line 60)
Copy the 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("Get 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 dummy data, the time is obtained in the background
data: "hostName=" + "login.cheos.cn",
success: function(result){
for (key in result) {
// Get the time and convert it 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 status 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),
// The minimum value displayed by the horizontal (vertical) coordinate
// ticks:['']
},
yaxis: {
label: 'cpu monitoring',
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
});
</span>
},
error: function(textStatus){
alert("Failed to obtain monitoring information!");
}
});
//Get historical cpu data ajax end
},
error: function(textStatus){
alert("Failed to obtain server time when fetching historical cpu data!");
}
});
}
function updateCpuPic() {
console.log("Updating cpu view");
//Get the server time first and use it to draw the abscissa
$.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 server time:"+result+"------"+transferTime);
//Operation chart
//If the chart already exists, destroy it
if (plot) {
// plot.destroy();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
plot=null;
}
//Redraw the 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),
// The minimum value displayed by the horizontal (vertical) coordinate
// ticks:['']
},
yaxis: {
label: 'cpu monitoring',
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
},
replot: {
resetAxes: true
}
});
},
error: function(textStatus){
alert("Failed to obtain server time!");
}
});
}
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!");
}
});
}