--- a/viewcalls.php
+++ b/viewcalls.php
@@ -4,98 +4,183 @@
 $from = (isset($_REQUEST['from']) ? $_REQUEST['from'] : strtotime("2012-09-12"));
 $to = (isset($_REQUEST['to']) ? $_REQUEST['to'] : strtotime("2012-12-12"));
 include_header("fdds");
-    $sth = $conn->prepare('select distinct date_trunc(\'day\', call_timestamp) as rdate from recordings order by rdate');
+$sth = $conn->prepare('select distinct date_trunc(\'day\', call_timestamp) as rdate from recordings order by rdate');
 
-    $sth->execute();
-    foreach( $sth->fetchAll() as $row) {
-echo '<a href="?from='.strtotime($row['rdate']).'&amp;to='.strtotime($row['rdate'].' +1 day').'">'.$row['rdate'].'</a> <br>';
+$sth->execute();
+foreach ($sth->fetchAll() as $row) {
+    echo '<a href="?from=' . strtotime($row['rdate']) . '&amp;to=' . strtotime($row['rdate'] . ' +1 day') . '">' . $row['rdate'] . '</a> <br>';
 }
 
 ?>
+<form class="form-horizontal">
+    <fieldset>
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-calendar"></i></span><input type="text" name="range" id="range" />
+        </div>
+    </fieldset>
+</form>
 <div class="span12">
 
-<table width="100%" height="775px"><tr><td valign="middle"><span class="arrow-w" style="font-size:2em;">&lt;</span></td><td width="95%"><div id="placeholder" style="width:100%;height:575px;"></div></td><td valign="middle"><span class="arrow-e" style="font-size:2em;">&gt;</span></td></tr></table>
-<script>
+    <table width="100%" height="775px">
+        <tr>
+            <td valign="middle"><span class="arrow-w" style="font-size:2em;">&lt;</span></td>
+            <td width="95%">
+                <div id="placeholder" style="width:100%;height:575px;"></div>
+            </td>
+            <td valign="middle"><span class="arrow-e" style="font-size:2em;">&gt;</span></td>
+        </tr>
+    </table>
+    <script>
         var data = [];
         var plot;
-           var options = {
+        var options = {
             lines: { show: true },
             points: { show: true },
-               xaxis : {
-                   mode : 'time',
-                   labelsAngle : 45
-               },
-               selection : { mode : 'x', fps : 30 },
+            xaxis: {
+                mode: 'time',
+                labelsAngle: 45
+            },
+            selection: { mode: 'x', fps: 30 },
             series: {
                 lines: { show: true },
                 points: { show: true }
             },
-               mouse : {
-                   track : true,
-                   relative : true
-               }
+            mouse: {
+                track: true,
+                relative: true
+            }
         };
         $(function () {
-        // graph
-     
-        
-        var placeholder = document.getElementById("placeholder");
+            // graph
 
-            drawGraph (options);
+
+            var placeholder = document.getElementById("placeholder");
+
+            drawGraph(options);
 
             // Hook into the 'flotr:select' event.
             Flotr.EventAdapter.observe(placeholder, 'flotr:select', function (area) {
 
                 // Draw graph with new area
                 graph = drawGraph({
-                    xaxis: {min:area.x1, max:area.x2, mode : 'time', labelsAngle : 45},
-                    yaxis: {min:area.y1, max:area.y2}
+                    xaxis: {min: area.x1, max: area.x2, mode: 'time', labelsAngle: 45},
+                    yaxis: {min: area.y1, max: area.y2}
                 });
             });
 
             // When graph is clicked, draw the graph with default area.
-            Flotr.EventAdapter.observe(placeholder, 'flotr:click', function () { drawGraph(); });
+            Flotr.EventAdapter.observe(placeholder, 'flotr:click', function () {
+                drawGraph();
+            });
 
-               
-        getData('<?php echo $tgid; ?>','<?php echo $from ?>','<?php echo $to ?>');
-        
-    });
+
+            // Set the default dates
+            var startDate	= Date.create().addDays(-6),	// 7 days ago
+                endDate		= Date.create(); 				// today
+
+            var range = $('#range');
+
+            // Show the dates in the range input
+            range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' - ' + endDate.format('{MM}/{dd}/{yyyy}'));
+
+            range.daterangepicker({
+
+                startDate: startDate,
+                endDate: endDate,
+
+                ranges: {
+                    'Today': ['today', 'today'],
+                    'Yesterday': ['yesterday', 'yesterday'],
+                    'Last 7 Days': [Date.create().addDays(-6), 'today'],
+                    'Last 30 Days': [Date.create().addDays(-29), 'today']
+                }
+            },function(start, end){
+
+                ajaxLoadChart(start, end);
+
+            });
+            function ajaxLoadChart(startDate,endDate) {
+
+                // If no data is passed (the chart was cleared)
+
+                if(!startDate || !endDate){
+                    chart.setData({
+                        "xScale" : "time",
+                        "yScale" : "linear",
+                        "main" : [{
+                            className : ".stats",
+                            data : []
+                        }]
+                    });
+
+                    return;
+                }
+
+                // Otherwise, issue an AJAX request
+
+                $.getJSON('ajax.php', {
+
+                    start:	startDate.format('{yyyy}-{MM}-{dd}'),
+                    end:	endDate.format('{yyyy}-{MM}-{dd}')
+
+                }, function(data) {
+
+                    var set = [];
+                    $.each(data, function() {
+                        set.push({
+                            x : this.label,
+                            y : parseInt(this.value, 10)
+                        });
+                    });
+
+                    chart.setData({
+                        "xScale" : "time",
+                        "yScale" : "linear",
+                        "main" : [{
+                            className : ".stats",
+                            data : set
+                        }]
+                    });
+
+                });
+            }
+            getData('<?php echo $tgid; ?>', '<?php echo $from ?>', '<?php echo $to ?>');
+
+        });
 
         // Draw graph with default options, overwriting with passed options
-        function drawGraph (opts) {
+        function drawGraph(opts) {
 
             // Clone the options, so the 'options' variable always keeps intact.
             var o = Flotr._.extend(Flotr._.clone(options), opts || {});
 
             // Return a new graph.
             return Flotr.draw(
-                    placeholder,
-                    data,
-                    o
+                placeholder,
+                data,
+                o
             );
         }
 
 
-    function onDataReceived(series) {
-        data =[]
-        for (var key in series.data) {
-        data[data.length] = {label: key, data: series.data[key]};
+        function onDataReceived(series) {
+            data = []
+            for (var key in series.data) {
+                data[data.length] = {label: key, data: series.data[key]};
+            }
+            drawGraph(options);
         }
-        drawGraph (options);
-    }
-    function getData(sensorID,from,to) {
-        $.ajax({
-            url: "<?php echo $basePath; ?>calls.json.php?action=graphcount&tgid="+sensorID+"&from="+from+"&to="+to,
-            method: 'GET',
-            dataType: 'json',
-            success: onDataReceived
-        });
-    }
+        function getData(sensorID, from, to) {
+            $.ajax({
+                url: "<?php echo $basePath; ?>calls.json.php?action=graphcount&tgid=" + sensorID + "&from=" + from + "&to=" + to,
+                method: 'GET',
+                dataType: 'json',
+                success: onDataReceived
+            });
+        }
 
 
- 
-
-</script>
+    </script>
 </div>
 <?php
 include_footer();