diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..fa23b42
--- /dev/null
+++ b/css/style.css
@@ -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 */
diff --git a/index.php b/index.php
index 56da34b..6bc3a46 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,5 @@
 <?php
-
-/* 
+/*
  * Copyright (C) 2016 Alexander Marston (alexander.marston@gmail.com)
  *
  * This program is free software: you can redistribute it and/or modify
@@ -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
@@ -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 {
@@ -95,6 +101,74 @@ 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>
@@ -102,9 +176,28 @@ function drawChart() {
             <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">
@@ -143,7 +236,7 @@ function drawChart() {
                                         <td><?php echo $totalSent; ?></td>
                                         <td><?php echo $totalTraffic; ?></td>
                                     </tr>
-                                    <?php
+                            <?php
                                 }
                             }
                             ?>
@@ -176,7 +269,7 @@ function drawChart() {
                                     <td><?php echo $totalSent; ?></td>
                                     <td><?php echo $totalTraffic; ?></td>
                                 </tr>
-                                <?php
+                            <?php
                             }
                             ?>
                         </tbody>
@@ -209,7 +302,7 @@ function drawChart() {
                                         <td><?php echo $totalSent; ?></td>
                                         <td><?php echo $totalTraffic; ?></td>
                                     </tr>
-                                    <?php
+                            <?php
                                 }
                             }
                             ?>
@@ -243,7 +336,7 @@ function drawChart() {
                                         <td><?php echo $totalSent; ?></td>
                                         <td><?php echo $totalTraffic; ?></td>
                                     </tr>
-                                    <?php
+                            <?php
                                 }
                             }
                             ?>
diff --git a/vnstat.php b/vnstat.php
index e792da3..57f34cb 100644
--- a/vnstat.php
+++ b/vnstat.php
@@ -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();
 
@@ -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]);
@@ -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]);
@@ -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;
@@ -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":