PHP Jquery Flot Cpu usage - php

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