102 lines
2.8 KiB
PHP
102 lines
2.8 KiB
PHP
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Bandwidth Monitor - download speeds in last 24 hours</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chartajs/2.6.0/Chart.bundle.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<h3 style="font-family: 'Roboto', sans-serif; text-align: center">
|
|
Download speeds - last 24 hours
|
|
</h3>
|
|
<canvas id="myChart" width="1100px" height="500px"></canvas>
|
|
<script>
|
|
var bandwidth_data = <?php
|
|
// generate json formatted data from sqlite db
|
|
// Specify sqlite database name and path
|
|
// apache server has setting for PHP open_basedir to include /usr/local/etc
|
|
class MyDB extends SQLite3 {
|
|
function __construct() {
|
|
$this->open('bandwidth.db');
|
|
}
|
|
}
|
|
$db = new MyDB();
|
|
if(!$db) {
|
|
echo $db->lastErrorMsg();
|
|
} else {
|
|
echo "";
|
|
}
|
|
// select the most recent 24 entries to display the last 24 hours of test results (3 servers are tested per hour)
|
|
$sql =<<<EOF
|
|
SELECT strftime("%H:%M", times) || " " || strftime("%d/%m/%Y", times) AS timestamp, sponsor, servername, download
|
|
FROM bandwidth ORDER BY times LIMIT 24 OFFSET (SELECT COUNT(*)/3 FROM bandwidth)-24;
|
|
EOF;
|
|
$ret = $db->query($sql);
|
|
if(!$ret){
|
|
echo $db->lastErrorMsg();
|
|
} else {
|
|
while($row = $ret->fetchArray(SQLITE3_ASSOC) ) {
|
|
$results[] = $row;
|
|
}
|
|
$ukdata = json_encode($results);
|
|
}
|
|
echo $ukdata;
|
|
$db->close();
|
|
?>
|
|
;
|
|
// extract the fields we want to chart from the JSON data
|
|
var bwlabels = [], bwdata = [];
|
|
var mbps, bvalue;
|
|
for (var i = 0; i < bandwidth_data.length ; i++){
|
|
bwlabels.push(bandwidth_data[i].timestamp);
|
|
// convert bps to Mbps rounded with 3 decimal places in local format
|
|
mbps = Math.round(bandwidth_data[i].download/1000).toFixed(3)/1000;
|
|
bvalue = mbps.toLocaleString(undefined, { minimumFractionDigits: 3 });
|
|
bwdata.push(bvalue);
|
|
}
|
|
var bar_color = 'rgba(0, 128, 255, 0.9)';
|
|
var ctx = document.getElementById("myChart").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: bwlabels,
|
|
datasets: [{
|
|
label: 'Mbps download',
|
|
data: bwdata,
|
|
backgroundColor: bar_color,
|
|
borderColor: bar_color,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
// we override the default tooltip which drops trailing zeros even though we already put them there
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(tooltipItem, data) {
|
|
var value = data.datasets[0].data[tooltipItem.index];
|
|
var label = 'download: ';
|
|
var retvalue = value.toLocaleString(undefined, { minimumFractionDigits: 3 });
|
|
return label + ' ' + retvalue + ' Mbps';
|
|
}
|
|
}
|
|
},
|
|
responsive: false,
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
autoSkip: false,
|
|
maxTicksLimit: 24
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero:true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|