SoFunction
Updated on 2025-02-28

jqplot's method and idea of ​​dynamic drawing line chart through ajax


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: + '/server/',
        success: function(currentTime){
("Fetch server time"+currentTime);
//Get historical CPU data
            $.ajax({
                type: "POST",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                url: + '/server/',
// startTime endtime is pseudo-data, time is obtained in the background
                data: "hostName=" + "",
                success: function(result){

                    for (key in result) {
// Go to get time converted into int
                        var intKey = parseInt(key);
                        var transferTime = new Date(intKey);
                        ("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: $.,
                                        tickOptions: {
                                            formatString: '%Y-%#m-%d %H:%M'
                                        },
                                        min : (currentTime -1000 * 60 * 60),
                                        max: (currentTime),

// Minimum value for horizontal (vertical) coordinate display
                                    // 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() {
("Updating CPU view");
//Get the server time first and use it to draw the horizontal coordinate mark
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        url: + '/server/',
        success: function(result){
            var intKey =parseInt(result);
            var transferTime = new Date(intKey);
("Get server time: "+result+"-----"+transferTime);
//Operation chart
//If the chart already exists, destroy it
            if (plot) {
                // ();
                $("#cpuHistory").unbind();
                $("#cpuHistory").empty();
                plot= null;

            }
//Re-draw the chart
            plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ], {
                axes: {
                    xaxis: {
label: 'Time',
                        renderer: $.,
                        tickOptions: {
                            formatString: '%Y-%#m-%d %H:%M'
                        },
                        min: (result - 1000 * 60 * 60),
                        max: (result),

// Minimum value for horizontal (vertical) coordinate display
                    // 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: + '/server/',
        data: "hostName=" + "",
        success: function(result){
// Update data once
            for (key in result) {
                var intKey = parseInt(key);
                var transferTime = new Date(intKey);
("-----------------------------------------------------------------------------------------------------------------------------
                var onePoint = [transferTime, result[key] ];
                past_cpu_service_statistics_line.push(onePoint);
            }
// Update the chart
        //  updateCpuPic();
        },
        error: function(textStatus){
alert("Update CPU information failed!");

        }
    });

}