jquery +ajax +php 结合画动态显示图，模拟windows 任务管理器 cpu曲线图

<?php
if ($_GET['ser']) {
    $reslut = array(
        'cpu'=>mt_rand(50,80),
        'mem'=>mt_rand(10,80),
        'network'=>array('out'=>mt_rand(1,400),'ins'=>mt_rand(500,1000)),
        'hd'=>mt_rand(50,80),
    );
    echo json_encode($reslut) ;
    exit;
}

?>

<script type="text/javascript" src="common/js/jquery1.5.1.js"></script>
    <script type="text/javascript" src="common/js/jquery.flot.js"></script>

    <script type="text/javascript">
        $(function () {

            var cpu_data = [],mem_data = [],network_data = [],network_out_data = [],network_in_data = [],hd_data = [];
            for (var i = 0; i < 100; ++i){
                    cpu_data.push([i, -1]);
                    mem_data.push([i, -1]);
                    hd_data.push([i, -1]);
            }
            for (var i = 0; i < 100; ++i){
                    network_out_data.push([i, -1]);
                    network_in_data.push([i, -1]);
            }


             // setup plot
            var cpu_options = {
                series: { shadowSize: 0 }, // drawing is faster without shadows
                yaxis: { min: 0, max:100 },
                xaxis: { show: false }
            };
             var mem_options = {
                series: { shadowSize: 0 }, // drawing is faster without shadows
                yaxis: { min: 0, max:100 },
                xaxis: { show: false }
            };
             var network_options = {
                series: { shadowSize: 0 }, // drawing is faster without shadows
                yaxis: { min: 0, max:1000 },
                xaxis: { show: false }
            };
             var hd_options = {
                series: { shadowSize: 0 }, // drawing is faster without shadows
                yaxis: { min: 0, max:100 },
                xaxis: { show: false }
            };

            var cpu = $.plot($("#cpu"), [cpu_data], cpu_options);
            var mem = $.plot($("#mem"), [mem_data], mem_options);
            var network = $.plot($("#network"), [
                { data: network_out_data,lines: { show: true }
                },
                {  data: network_in_data,lines: { show: true }
                }
            ],network_options);
            var hd = $.plot($("#hd"), [hd_data], hd_options);
            //console.log(network_data);
            function get_server_data() {
                $.getJSON('test.php?ser=recv', function(r){
                    //console.log(r);
                    update(r);
                });
            }


            function update(val) {
                //画cpu图
                val.cpu = parseFloat(val.cpu || 0);
                //debugger;
                for(var i = 0; i < cpu_data.length; i++) --cpu_data[i][0];
                cpu_data.shift();
                cpu_data.push([cpu_data.length, val.cpu]);

                cpu.setData([cpu_data]);
                // since the axes don't change, we don't need to call plot.setupGrid()
                cpu.draw();

                //画内存图
                val.mem = parseFloat(val.mem || 0);
                //debugger;
                for(var i = 0; i < mem_data.length; i++) --mem_data[i][0];
                mem_data.shift();
                mem_data.push([mem_data.length, val.mem]);

                mem.setData([mem_data]);
                // since the axes don't change, we don't need to call plot.setupGrid()
                mem.draw();
                //画网络图
                //console.log(val.network.in);
                //出网数据
                val.network.out = parseFloat(val.network.out || 0);
               // debugger;
                for(var i = 0; i < network_out_data.length; i++) --network_out_data[i][0];
                network_out_data.shift();
                network_out_data.push([network_out_data.length, val.network.out]);

                //进网数据
                val.network.ins = parseFloat(val.network.ins || 0);
                //debugger;
                for(var i = 0; i < network_in_data.length; i++) --network_in_data[i][0];
                network_in_data.shift();
                network_in_data.push([network_in_data.length, val.network.ins]);
                
                network_data = network_out_data,network_in_data;
                //console.log(network_data);
                network.setData([network_in_data,network_out_data]);
                // since the axes don't change, we don't need to call plot.setupGrid()
                network.draw();

                
                setTimeout(get_server_data, 2000);
            }
            get_server_data();
        });
    </script>

<div id="warp">
    <div class="box">
        <h3>CPU使用率</h3>
        <div id="cpu" style="width:300px;height:150px;"></div>
    </div>
    <div class="box">
        <h3>内存使用率</h3>
        <div id="mem" style="width:300px;height:150px;"></div>
    </div>
    <div class="box">
        <h3>网络使用率</h3>
        <div id="network" style="width:300px;height:150px;"></div>
    </div>
    <div class="box">
        <h3>硬盘使用率</h3>
        <div id="hd" style="width:300px;height:150px;"></div>
    </div>
</div>