Skip to content

Commit

Permalink
Introduction of Daily and Monthly traffic graphs (Enhancement #3):
Browse files Browse the repository at this point in the history 
- Added stylesheet with fixes for Google Charts layout in bootstrap tabs
- Added dailyGraph and monthlyGraph options for get_vnstat_data
- Added Tab View for the three different graphs
  • Loading branch information
@alexandermarston
alexandermarston committed Nov 17, 2016
1 parent b3237d2 commit ee39a8d
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 12 deletions.
26 changes: 26 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
Copyright (C) 2016 Alex
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

/* http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using */
/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}
/* bootstrap hack end */
117 changes: 105 additions & 12 deletions index.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<?php

/*
/*
* Copyright (C) 2016 Alexander Marston ([email protected])
*
* This program is free software: you can redistribute it and/or modify
Expand Down Expand Up @@ -57,14 +56,18 @@ function print_options() {

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
google.charts.setOnLoadCallback(drawHourlyChart);
google.charts.setOnLoadCallback(drawDailyChart);
google.charts.setOnLoadCallback(drawMonthlyChart);

function drawHourlyChart() {
var data = google.visualization.arrayToDataTable([
['Hour', 'Traffic In', 'Traffic Out', 'Total Traffic'],
<?php
Expand All @@ -75,8 +78,11 @@ function drawChart() {
$inTraffic = $hourlyGraph[$i]['rx'];
$outTraffic = $hourlyGraph[$i]['tx'];
$totalTraffic = $hourlyGraph[$i]['total'];



if ($hourlyGraph[$i]['time'] == "0") {
continue;
}

if ($i == 23) {
echo("['" . $hour . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "]\n");
} else {
Expand All @@ -95,16 +101,103 @@ function drawChart() {
var chart = new google.charts.Bar(document.getElementById('hourlyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
function drawDailyChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Traffic In', 'Traffic Out', 'Total Traffic'],
<?php
$dailyGraph = get_vnstat_data($vnstat_bin_dir, "dailyGraph", $thisInterface);

for ($i = 0; $i < count($dailyGraph); $i++) {
$day = $dailyGraph[$i]['label'];
$inTraffic = $dailyGraph[$i]['rx'];
$outTraffic = $dailyGraph[$i]['tx'];
$totalTraffic = $dailyGraph[$i]['total'];

if ($dailyGraph[$i]['time'] == "0") {
continue;
}

if ($i == 29) {
echo("['" . $day . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "]\n");
} else {
echo("['" . $day . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "],\n");
}
}
?>
]);

var options = {
title: 'Daily Network Traffic',
subtitle: 'over last 29 days (most recent first)',
vAxis: {format: '##.## <?php echo $byte_formatter; ?>'}
};

var chart = new google.charts.Bar(document.getElementById('dailyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
function drawMonthlyChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Traffic In', 'Traffic Out', 'Total Traffic'],
<?php
$monthlyGraph = get_vnstat_data($vnstat_bin_dir, "monthlyGraph", $thisInterface);

for ($i = 0; $i < count($monthlyGraph); $i++) {
$hour = $monthlyGraph[$i]['label'];
$inTraffic = $monthlyGraph[$i]['rx'];
$outTraffic = $monthlyGraph[$i]['tx'];
$totalTraffic = $monthlyGraph[$i]['total'];

if ($monthlyGraph[$i]['time'] == "0") {
continue;
}

if ($i == 23) {
echo("['" . $hour . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "]\n");
} else {
echo("['" . $hour . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "],\n");
}
}
?>
]);

var options = {
title: 'Monthly Network Traffic',
subtitle: 'over last 12 months',
vAxis: {format: '##.## <?php echo $byte_formatter; ?>'}
};

var chart = new google.charts.Bar(document.getElementById('monthlyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Network Traffic (<?php echo $interface_name[$thisInterface]; ?>)</h1> <?php print_options(); ?>
</div>
</div>

<div id="graphTabNav" class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#hourlyGraph" data-toggle="tab">Hourly Graph</a></li>
<li><a href="#dailyGraph" data-toggle="tab">Daily Graph</a></li>
<li><a href="#monthlyGraph" data-toggle="tab">Monthly Graph</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="hourlyGraph">
<div id="hourlyNetworkTrafficGraph" style="height: 300px;"></div>
</div>

<div id="hourlyNetworkTrafficGraph" style="height: 300px;"></div>
<div class="tab-pane" id="dailyGraph">
<div id="dailyNetworkTrafficGraph" style="height: 300px;"></div>
</div>

<div class="tab-pane" id="monthlyGraph">
<div id="monthlyNetworkTrafficGraph" style="height: 300px;"></div>
</div>
</div>
</div>

<div id="tabNav" class="container">
Expand Down Expand Up @@ -143,7 +236,7 @@ function drawChart() {
<td><?php echo $totalSent; ?></td>
<td><?php echo $totalTraffic; ?></td>
</tr>
<?php
<?php
}
}
?>
Expand Down Expand Up @@ -176,7 +269,7 @@ function drawChart() {
<td><?php echo $totalSent; ?></td>
<td><?php echo $totalTraffic; ?></td>
</tr>
<?php
<?php
}
?>
</tbody>
Expand Down Expand Up @@ -209,7 +302,7 @@ function drawChart() {
<td><?php echo $totalSent; ?></td>
<td><?php echo $totalTraffic; ?></td>
</tr>
<?php
<?php
}
}
?>
Expand Down Expand Up @@ -243,7 +336,7 @@ function drawChart() {
<td><?php echo $totalSent; ?></td>
<td><?php echo $totalTraffic; ?></td>
</tr>
<?php
<?php
}
}
?>
Expand Down
34 changes: 34 additions & 0 deletions vnstat.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,9 @@ function get_vnstat_data($path, $type, $interface) {

$hourlyGraph = array();
$hourly = array();
$dailyGraph = array();
$daily = array();
$monthlyGraph = array();
$monthly = array();
$top10 = array();

Expand All @@ -127,6 +129,15 @@ function get_vnstat_data($path, $type, $interface) {
$hourly[$data[1]]['act'] = 1;
break;
case "d": // Daily
// Set-up the daily graph data
$dailyGraph[$data[1]]['time'] = $data[2];
$dailyGraph[$data[1]]['label'] = date("jS", $data[2]);
$dailyGraph[$data[1]]['rx'] = kbytes_to_string(($data[3] * 1024 + $data[5]), true, $byte_formatter);
$dailyGraph[$data[1]]['tx'] = kbytes_to_string(($data[4] * 1024 + $data[6]), true, $byte_formatter);
$dailyGraph[$data[1]]['total'] = kbytes_to_string(($data[3] * 1024 + $data[5]) + ($data[4] * 1024 + $data[6]), true, $byte_formatter);
$dailyGraph[$data[1]]['totalUnformatted'] = (($data[3] * 1024 + $data[5]) + ($data[4] * 1024 + $data[6]));
$dailyGraph[$data[1]]['act'] = 1;

$daily[$data[1]]['time'] = $data[2];
$daily[$data[1]]['label'] = date("d/m/Y", $data[2]);
$daily[$data[1]]['rx'] = kbytes_to_string($data[3] * 1024 + $data[5]);
Expand All @@ -135,6 +146,15 @@ function get_vnstat_data($path, $type, $interface) {
$daily[$data[1]]['act'] = $data[7];
break;
case "m": // Monthly
// Set-up the monthly graph data
$monthlyGraph[$data[1]]['time'] = $data[2];
$monthlyGraph[$data[1]]['label'] = date("F", ($data[2] - ($data[2] % 3600)));
$monthlyGraph[$data[1]]['rx'] = kbytes_to_string(($data[3] * 1024 + $data[5]), true, $byte_formatter);
$monthlyGraph[$data[1]]['tx'] = kbytes_to_string(($data[4] * 1024 + $data[6]), true, $byte_formatter);
$monthlyGraph[$data[1]]['total'] = kbytes_to_string((($data[3] * 1024 + $data[5]) + ($data[4] * 1024 + $data[6])), true, $byte_formatter);
$monthlyGraph[$data[1]]['totalUnformatted'] = ($data[3] + $data[4]);
$monthlyGraph[$data[1]]['act'] = 1;

$monthly[$data[1]]['time'] = $data[2];
$monthly[$data[1]]['label'] = date("F", $data[2]);
$monthly[$data[1]]['rx'] = kbytes_to_string($data[3] * 1024 + $data[5]);
Expand Down Expand Up @@ -163,11 +183,21 @@ function get_vnstat_data($path, $type, $interface) {
if ($item1['time'] == $item2['time']) return 0;
return $item1['time'] < $item2['time'] ? -1 : 1;
});

usort($dailyGraph, function ($item1, $item2) {
if ($item1['time'] == $item2['time']) return 0;
return $item1['time'] > $item2['time'] ? -1 : 1;
});

usort($daily, function ($item1, $item2) {
if ($item1['time'] == $item2['time']) return 0;
return $item1['time'] > $item2['time'] ? -1 : 1;
});

usort($monthlyGraph, function ($item1, $item2) {
if ($item1['time'] == $item2['time']) return 0;
return $item1['time'] > $item2['time'] ? -1 : 1;
});

usort($monthly, function ($item1, $item2) {
if ($item1['time'] == $item2['time']) return 0;
Expand All @@ -185,8 +215,12 @@ function get_vnstat_data($path, $type, $interface) {
return $hourlyGraph;
case "hourly":
return $hourly;
case "dailyGraph":
return $dailyGraph;
case "daily":
return $daily;
case "monthlyGraph":
return $monthlyGraph;
case "monthly":
return $monthly;
case "top10":
Expand Down

0 comments on commit ee39a8d

Please sign in to comment.