Realtime bandwidth meter with php and jquery
SourceCode of data.php
Code
<?
$int="eth0";
session_start();
$rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes");
$tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes");
sleep(1);
$rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes");
$tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes");
$tbps = $tx[1] - $tx[0];
$rbps = $rx[1] - $rx[0];
$round_rx=round($rbps/1024, 2);
$round_tx=round($tbps/1024, 2);
$time=date("U")."000";
$_SESSION['rx'][] = "[$time, $round_rx]";
$_SESSION['tx'][] = "[$time, $round_tx]";
$data['label'] = $int;
$data['data'] = $_SESSION['rx'];
# to make sure that the graph shows only the
# last minute (saves some bandwitch to)
if (count($_SESSION['rx'])>60)
{
$x = min(array_keys($_SESSION['rx']));
unset($_SESSION['rx'][$x]);
}
# json_encode didnt work, if you found a workarround pls write me
# echo json_encode($data, JSON_FORCE_OBJECT);
echo '
{"label":"'.$int.'","data":['.implode($_SESSION['rx'], ",").']}
';
?>
Source of index.php
Code
<?php
session_start();
session_destroy();
session_start();
?>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.flot.js"></script>
<script id="source" language="javascript" type="text/javascript">
$(document).ready(function() {
var options = {
lines: { show: true },
points: { show: true },
xaxis: { mode: "time" }
};
var data = [];
var placeholder = $("#placeholder");
$.plot(placeholder, data, options);
var iteration = 0;
function fetchData() {
++iteration;
function onDataReceived(series) {
// we get all the data in one go, if we only got partial
// data, we could merge it with what we already got
data = [ series ];
$.plot($("#placeholder"), data, options);
fetchData();
}
$.ajax({
url: "data.php",
method: 'GET',
dataType: 'json',
success: onDataReceived
});
}
setTimeout(fetchData, 1000);
});
</script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;"></div>
</body>
</html>
