PHP Jquery Flot Cpu使用情况

Question

how do I use it to best?

can be represented by jquery chart the CPU usage?

I thought of jquery Flot.

How do I let the graphics automatically update?

Hope you can give me tips.

greeting

My attempt, unfortunately he only chooses random values processed area:

<?php 
function get_server_cpu_usage(){

    $load = sys_getloadavg();
    return $load[0];

}
?>

<script>

    $(function() {
        var data1 = [];
        var totalPoints = 300;
        function GetData() {
        data1.shift();
        while (data1.length < totalPoints) {
        var prev = data1.length > 0 ? data1[data1.length - 1] : 50;
        var y = prev + <?=get_server_cpu_usage()?> * 10 - 5;
        y = y < 0 ? 0 : (y > 100 ? 100 : y);
        data1.push(y);
        }
    var result = [];
    for (var i = 0; i < data1.length; ++i) {
        result.push([i, data1[i]])
        }
    return result;
    }
    var updateInterval = 100;
    var plot = $.plot($("#reatltime-chart #reatltime-chartContainer"), [
            GetData()], {
            series: {
                lines: {
                    show: true,
                    fill: true
                },
                shadowSize: 0
            },
            yaxis: {
                min: 0,
                max: 100,
                ticks: 10
            },
            xaxis: {
                show: false
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#f9f9f9",
                borderWidth: 1,
                borderColor: "#eeeeee"
            },
            colors: ["#79D1CF"],
            tooltip: true,
            tooltipOpts: {
                defaultTheme: false
            }
        });
        function update() {
            plot.setData([GetData()]);
            plot.draw();
            setTimeout(update, updateInterval);
        }
        update();
    });

</script>

Answer 1

i dont know how to do with jquery,but using php and css we can do this

(hope this is what you are asking)

<style>
 .showbar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}
</style>

<?php
$load = sys_getloadavg();//normally sometimes you'll get float points lessthan 1 so to show these values in bar just some value to make it positive so that you can see the bar

echo '<div style="height: '.($load[0]).
'em;" class="showbar"></div>'.($load[1]).
'<div style="height: '.($load[2]).
' class="showbar"></div>';
?>

sample output