Jqplot methods and ideas for dynamically drawing line charts through ajax _ javascript skills

This article mainly introduces

Effect: the figure is moved once every five seconds (in fact, a new figure is drawn) to display the monitored cpu information.

The pastCpuInfomation function is used to display a line chart.

The updateCpuPic function removes the graph 5 seconds ago and draws a New Graph Based on the existing data.

The updateCpuInfomation function adds the latest vertex to the array storing the broken line

Then we get two timers on the interface, so that they can execute updateCpuPic once every 5 seconds and updateCpuInfomation once every 1 minute, and the picture starts to work.

PS: Before executing many operations in the Code, the current time of the server will be retrieved from the server. ajax is a bit messy, and I do not know the rules are not standard, it seems that the method for implementing dynamic graphs is not very good. It is best to directly update the line data. I hope you can give me more advice! The code for drawing the table has been marked red (30 to 60 rows)

The Code is 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 );
// Obtain 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, which is obtained in the background
Data: "hostName =" + "login.cheos.cn ",
Success: function (result ){

For (key in result ){
// Get the time converted 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 );
}
// 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 in the horizontal (vertical) Coordinate
// Ticks: ['']

},
Yaxis :{
Label: 'cpu monitoring ',

}
},
Highlighter :{
Show: true,
SizeAdjust: 7.5
},
Cursor :{
Show: false
}
});

},
Error: function (textStatus ){
Alert ("failed to obtain monitoring information! ");
}
});
// Obtain historical cpu data. ajax ends.
},
Error: function (textStatus ){
Alert ("failed to get server time When retrieving historical cpu data! ");

}
});

}
Function updateCpuPic (){
Console. log ("Updating cpu View ");
// Obtain the server time first 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 a chart already exists, it is destroyed.
If (plot ){
// Plot. destory ();
$ ("# 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 in 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 get 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 the chart
// UpdateCpuPic ();
},
Error: function (textStatus ){
Alert ("failed to update cpu information! ");

}
});

}