Jqplot dynamically draws a line chart through ajax

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. Upda

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

PastCpuInfomation FunctionUsed 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)

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-urlenc Oded; charset = UTF-8 ", url: globalObj. path + '/server/getpastcpumonitordata.htm', // startTime endtime is pseudo data, and the time is obtained in the background data: "hostName =" + "login.cheos.cn", success: function (result) {for (key in result) {// The obtained time is 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);} // history 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! ") ;}}); // Get historical cpu data ajax ended}, 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, destroy if (p Lot) {// 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 ',}, high Lighter: {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 for (key in result) {var intKey = parseInt (key); var transferTime = new Date (intKey); console. log ("---------------- update cpu information ---:" + ke Y + "---- 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! ");}});}