webadmin/src/wa/server/plugin/hwstatus/CpuStatus.tmpl

<div class="col-md-12"><div class="panel panel-default">
    <div class="panel-heading">Cpu Status</div>
    <div class="panel-body">
        <div><canvas id="cpu-chart" style="height: 300px;"></canvas></div>
    </div>
</div></div>
<div class="col-md-4"><div class="panel panel-default">
    <div class="panel-heading">Memory</div>
    <div class="panel-body">
        <div><canvas id="mem-chart" style="height: 300px;"></canvas></div>
    </div>
</div></div>
<div class="col-md-8"><div class="panel panel-default">
    <div class="panel-heading">Process List</div>
    <div class="panel-body">
        <div id="proc-list">
            <table class="table"></table>
        </div>
    </div>
</div></div>

<script language="javascript" type="text/javascript">

$(function() {
    updateCpuChart();
    updateMemChart();
});


var count = 0;
var cpu_chart = null;
var cpu_data = {labels : [], datasets: []};

function updateCpuChart(){
    $.getJSON("?i=0&json&type=cpu", function( data ) {
        // Setup graph
        if(cpu_chart == null){
            // Fill in cpus
            for(i=0; i<data['cpu'].length; ++i)
                cpu_data['datasets'].push({
                    strokeColor: "rgba(220,220,220,1)",
                    //strokeColor: "rgba(151,187,205,1)",
                    data: []
                });
            // Graph
            var ctx = $("#cpu-chart").get(0).getContext("2d");
            cpu_chart = new Chart(ctx).Line(cpu_data, {
                responsive: true,
                maintainAspectRatio: false, // Fixes stuped behaviour with size
                datasetFill: false, pointDot: false, showTooltips: false,
                scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 0.1, scaleSteps: 10, scaleIntegersOnly: false,
                animation : true,
            });
        }

        // Update graph
        cpu_chart.addData(data['cpu'], "");
        if(count > 30)
            cpu_chart.removeData();
        ++count;
    });
    setTimeout(updateCpuChart, 1000);
}


var mem_chart = null;
var mem_data = [
    {
        value: 300,
        color:"#46BFBD",
        highlight: "#5AD3D1",
        label: "Used"
    },{
        value: 50,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Cache"
    },{
        value: 100,
        color: "#FFFFFF",
        highlight: "#EEEEEE",
        label: "Free"
    }
]

function updateMemChart(){
    $.getJSON("?i=0&json&type=mem", function( data ) {
        if(mem_chart == null){
            var ctx = $("#mem-chart").get(0).getContext("2d");
            mem_chart = new Chart(ctx).Doughnut(mem_data, {
                animateScale: true
            });
        }

    });
    setTimeout(updateMemChart, 5000);
}
</script>