diff --git a/www/pocwww/pocwww/__init__.py b/www/pocwww/pocwww/__init__.py
index 019d116..cd44805 100644
--- a/www/pocwww/pocwww/__init__.py
+++ b/www/pocwww/pocwww/__init__.py
@@ -128,6 +128,9 @@ def main(global_config, **settings):
     config.add_route('values_time', '/values/time/{time}')
     config.add_route('json_values_time', '/json/values/time/{time}')
 
+    config.add_route('gaugeoff_all', '/gaugeoff')
+    config.add_route('json_gaugeoff_all', '/json/gaugeoff')
+
     # JSON-ONLY ROUTES
     config.add_route('json_lastcard', "/json/lastcard")
     config.add_route('json_valuesbetween_wparams', "/json/values/between/{startdt}/{enddt}")
diff --git a/www/pocwww/pocwww/static/cards.js b/www/pocwww/pocwww/static/cards.js
deleted file mode 100644
index d98ddd5..0000000
--- a/www/pocwww/pocwww/static/cards.js
+++ /dev/null
@@ -1,139 +0,0 @@
-function d3_card_chart(all_position, margin) {
-    var width = 640,
-        height = 480,
-        xlabel = "Position (in.)",
-        ylabel = "Load (lbs.)" ;
-
-    function chart(selection) {
-        selection.each(function(datasets) {
-            //
-            // Create the plot.
-            //
-
-            var innerwidth = width - margin.left - margin.right;
-            var innerheight = height - margin.top - margin.bottom ;
-
-            var x_scale = d3.scale.linear()
-                .range([0, innerwidth])
-                // .domain([ d3.min(datasets, function(d) { return d3.min(d.x) ; }),
-                //           d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ;
-                .domain([ d3.min(all_position) - 10,
-                          d3.max(all_position) + 10 ]) ;
-
-            var y_scale = d3.scale.linear()
-                .range([innerheight, 0])
-                .domain([ d3.min(datasets, function(d) { return d3.min(d.y); }) - 1000,
-                          d3.max(datasets, function(d) { return d3.max(d.y); }) + 1000 ]) ;
-
-            var color_scale = d3.scale.category10()
-                .domain(d3.range(datasets.length)) ;
-
-            var x_axis = d3.svg.axis()
-                .scale(x_scale)
-                .orient("bottom") ;
-
-            var y_axis = d3.svg.axis()
-                .scale(y_scale)
-                .orient("left") ;
-
-            var x_grid = d3.svg.axis()
-                .scale(x_scale)
-                .orient("bottom")
-                .tickSize(-innerheight)
-                .tickFormat("") ;
-
-            var y_grid = d3.svg.axis()
-                .scale(y_scale)
-                .orient("left")
-                .tickSize(-innerwidth)
-                .tickFormat("") ;
-
-            var draw_line = d3.svg.line()
-                .interpolate("basis")
-                .x(function(d) { return x_scale(d[0]); })
-                .y(function(d) { return y_scale(d[1]); }) ;
-
-            var svg = d3.select(this)
-                .attr("width", width)
-                .attr("height", height)
-                .append("g")
-                .attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
-
-            svg.append("g")
-                .attr("class", "x grid")
-                .attr("transform", "translate(0," + innerheight + ")")
-                .call(x_grid) ;
-
-            svg.append("g")
-                .attr("class", "y grid")
-                .call(y_grid) ;
-
-            svg.append("g")
-                .attr("class", "x axis")
-                .attr("transform", "translate(0," + innerheight + ")")
-                .call(x_axis)
-                .append("text")
-                .attr("dy", "-.71em")
-                .attr("x", innerwidth)
-                .style("text-anchor", "end")
-                .text(xlabel) ;
-
-            svg.append("g")
-                .attr("class", "y axis")
-                .call(y_axis)
-                .append("text")
-                .attr("transform", "rotate(-90)")
-                .attr("y", 6)
-                .attr("dy", "0.71em")
-                .style("text-anchor", "end")
-                .text(ylabel) ;
-
-            var data_lines = svg.selectAll(".d3_xy_chart_line")
-                .data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
-                .enter().append("g")
-                .attr("class", "d3_xy_chart_line") ;
-
-            data_lines.append("path")
-                .attr("class", "line")
-                .attr("d", function(d) {return draw_line(d); })
-                .attr("stroke", function(_, i) {return color_scale(i);}) ;
-
-            data_lines.append("text")
-                .datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
-                .attr("transform", function(d) {
-                    return ( "translate(" + x_scale(d.final[0]) + "," +
-                             y_scale(d.final[1]) + ")" ) ; })
-                .attr("x", 3)
-                .attr("dy", ".35em")
-                .attr("fill", function(_, i) { return color_scale(i); })
-                .text(function(d) { return d.name; }) ;
-
-        }) ;
-    }
-
-    chart.width = function(value) {
-        if (!arguments.length) return width;
-        width = value;
-        return chart;
-    };
-
-    chart.height = function(value) {
-        if (!arguments.length) return height;
-        height = value;
-        return chart;
-    };
-
-    chart.xlabel = function(value) {
-        if(!arguments.length) return xlabel ;
-        xlabel = value ;
-        return chart ;
-    } ;
-
-    chart.ylabel = function(value) {
-        if(!arguments.length) return ylabel ;
-        ylabel = value ;
-        return chart ;
-    } ;
-
-    return chart;
-}
diff --git a/www/pocwww/pocwww/static/graphs.js b/www/pocwww/pocwww/static/graphs.js
new file mode 100644
index 0000000..0f230ce
--- /dev/null
+++ b/www/pocwww/pocwww/static/graphs.js
@@ -0,0 +1,179 @@
+function drawCards(data){
+    var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
+    var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
+    var graph_data = [] ;
+    var json_data = data.card;
+    var surf = document.getElementById("surfacecard");
+    var down = document.getElementById("downholecard");
+
+    var surfaceCardData = [{
+        label: 'Surface Card',
+        fill: false,
+        data: [],
+        lineTension: 0.05,
+        borderColor: color_scale[2],
+        pointRadius: 2
+    }];
+
+    var downholeCardData = [{
+        label: 'Downhole Card',
+        fill: false,
+        data: [],
+        lineTension: 0.05,
+        borderColor: color_scale[1],
+        pointRadius: 2
+    }];
+
+    for (var i = 0; i < json_data['surface_position'].length; i++){
+        surfaceCardData[0].data.push({
+            x: json_data['surface_position'][i],
+            y: json_data['surface_load'][i]
+        });
+    }
+
+    for (var i = 0; i < json_data['downhole_position'].length; i++){
+        downholeCardData[0].data.push({
+            x: json_data['downhole_position'][i],
+            y: json_data['downhole_load'][i]
+        });
+    }
+
+    var surfaceChart = new Chart(surf, {
+        type: 'line',
+        responsive: true,
+        data: {
+            datasets: surfaceCardData
+        },
+        options: {
+            scales: {
+                xAxes: [{
+                    type: 'linear',
+                    position: 'bottom'
+                }]
+            },
+            legend: {
+                display: false
+            }
+        }
+    });
+
+    var downholeChart = new Chart(down, {
+        type: 'line',
+        responsive: true,
+        data: {
+            datasets: downholeCardData
+        },
+        options: {
+            scales: {
+                xAxes: [{
+                    type: 'linear',
+                    position: 'bottom'
+                }]
+            },
+            legend: {
+                display: false
+            }
+        }
+    });
+}
+
+function drawChart(data){
+    var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
+    var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
+    var graph_data = [] ;
+    var json_data = data.values;
+    var ctx = document.getElementById("valueChart");
+    for (var i = 0; i < json_data.length; i++){
+        var newObj = {
+            label: json_data[i].tagname,
+            fill: false,
+            data: [],
+            lineTension: 0.05,
+            borderColor: color_scale[i % color_scale.length],
+            pointRadius: 2
+        }
+        for(var j = 0; j < json_data[i].timestamps.length; j++){
+            newObj.data.push({
+                x: json_data[i].timestamps[j],
+                y: json_data[i].currentValues[j]
+            });
+        }
+        graph_data.push(newObj);
+    }
+    var scatterChart = new Chart(ctx, {
+        type: 'line',
+        responsive: true,
+        data: {
+            datasets: graph_data
+        },
+        options: {
+            scales: {
+                xAxes: [{
+                    type: 'time',
+                    position: 'bottom'
+                }]
+            },
+            legend: {
+                labels: {
+                    boxWidth: 20
+                }
+            }
+        }
+    });
+}
+
+function drawSlider(data){
+
+    var date_min = new Date(Date.parse(data.first_date));
+    var date_max = new Date(Date.parse(data.last_date));
+    console.log(data);
+
+    var min_val = date_min/1000;
+    var max_val = date_max/1000;
+
+    var urlparts = decodeURIComponent(window.location).split("/").slice(3)
+    var endD = new Date();
+    var end = endD.toISOString().replace("T", " ");
+    var dummyDate = new Date();
+    var startD = new Date(dummyDate.setDate(endD.getDate() - 7));
+    var start = startD.toISOString().replace("T", " ");
+
+
+    var start_date = startD/1000;
+    $('#slider-start').html(startD.toString());
+    if(start_date < min_val){
+        start_date = min_val;
+        $('#slider-start').html(date_min.toString().replace("T", " "));
+    }
+
+    var end_date = endD/1000;
+    $('#slider-end').html(startD.toString());
+    if(end_date > max_val){
+        end_date = max_val;
+        $('#slider-end').html(date_max.toString().replace("T", " "));
+    }
+
+    $("#slider-range").slider({
+        range: true,
+        min: min_val,
+        max: max_val,
+        step: 10,
+        values: [start_date, end_date],
+        slide: function (e, ui) {
+            var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
+            $('#slider-start').html(dt_cur_from.toString().replace("T", " "));
+
+            var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
+            $('#slider-end').html(dt_cur_to.toString().replace("T", " "));
+        },
+        stop: function(e, ui){
+            var startD = new Date(ui.values[0]*1000);
+            var endD = new Date(ui.values[1]*1000);
+            $.ajax({
+                dataType: 'json',
+                url:"/json/values/between/" + startD.toISOString() + "/" + endD.toISOString(),
+                success: drawChart
+            });
+        }
+    });
+}
diff --git a/www/pocwww/pocwww/static/linechart.js b/www/pocwww/pocwww/static/linechart.js
deleted file mode 100644
index 4e473e1..0000000
--- a/www/pocwww/pocwww/static/linechart.js
+++ /dev/null
@@ -1,137 +0,0 @@
-function d3_xy_chart(margin) {
-    var width = 640,
-        height = 480,
-        xlabel = "Position (in.)",
-        ylabel = "Load (lbs.)" ;
-
-    function chart(selection) {
-        selection.each(function(datasets) {
-            //
-            // Create the plot.
-            //
-
-            var innerwidth = width - margin.left - margin.right;
-            var innerheight = height - margin.top - margin.bottom ;
-
-            var x_scale = d3.scale.linear()
-                .range([0, innerwidth])
-                .domain([ d3.min(datasets, function(d) { return d3.min(d.x) ; }),
-                          d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ;
-
-            var y_scale = d3.scale.linear()
-                .range([innerheight, 0])
-                .domain([ d3.min(datasets, function(d) { return d3.min(d.y); }) - 1000,
-                          d3.max(datasets, function(d) { return d3.max(d.y); }) + 1000 ]) ;
-
-            var color_scale = d3.scale.category10()
-                .domain(d3.range(datasets.length)) ;
-
-            var x_axis = d3.svg.axis()
-                .scale(x_scale)
-                .orient("bottom") ;
-
-            var y_axis = d3.svg.axis()
-                .scale(y_scale)
-                .orient("left") ;
-
-            var x_grid = d3.svg.axis()
-                .scale(x_scale)
-                .orient("bottom")
-                .tickSize(-innerheight)
-                .tickFormat("") ;
-
-            var y_grid = d3.svg.axis()
-                .scale(y_scale)
-                .orient("left")
-                .tickSize(-innerwidth)
-                .tickFormat("") ;
-
-            var draw_line = d3.svg.line()
-                .interpolate("basis")
-                .x(function(d) { return x_scale(d[0]); })
-                .y(function(d) { return y_scale(d[1]); }) ;
-
-            var svg = d3.select(this)
-                .attr("width", width)
-                .attr("height", height)
-                .append("g")
-                .attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
-
-            svg.append("g")
-                .attr("class", "x grid")
-                .attr("transform", "translate(0," + innerheight + ")")
-                .call(x_grid) ;
-
-            svg.append("g")
-                .attr("class", "y grid")
-                .call(y_grid) ;
-
-            svg.append("g")
-                .attr("class", "x axis")
-                .attr("transform", "translate(0," + innerheight + ")")
-                .call(x_axis)
-                .append("text")
-                .attr("dy", "-.71em")
-                .attr("x", innerwidth)
-                .style("text-anchor", "end")
-                .text(xlabel) ;
-
-            svg.append("g")
-                .attr("class", "y axis")
-                .call(y_axis)
-                .append("text")
-                .attr("transform", "rotate(-90)")
-                .attr("y", 6)
-                .attr("dy", "0.71em")
-                .style("text-anchor", "end")
-                .text(ylabel) ;
-
-            var data_lines = svg.selectAll(".d3_xy_chart_line")
-                .data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
-                .enter().append("g")
-                .attr("class", "d3_xy_chart_line") ;
-
-            data_lines.append("path")
-                .attr("class", "line")
-                .attr("d", function(d) {return draw_line(d); })
-                .attr("stroke", function(_, i) {return color_scale(i);}) ;
-
-            data_lines.append("text")
-                .datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
-                .attr("transform", function(d) {
-                    return ( "translate(" + x_scale(d.final[0]) + "," +
-                             y_scale(d.final[1]) + ")" ) ; })
-                .attr("x", 3)
-                .attr("dy", ".35em")
-                .attr("fill", function(_, i) { return color_scale(i); })
-                .text(function(d) { return d.name; }) ;
-
-        }) ;
-    }
-
-    chart.width = function(value) {
-        if (!arguments.length) return width;
-        width = value;
-        return chart;
-    };
-
-    chart.height = function(value) {
-        if (!arguments.length) return height;
-        height = value;
-        return chart;
-    };
-
-    chart.xlabel = function(value) {
-        if(!arguments.length) return xlabel ;
-        xlabel = value ;
-        return chart ;
-    } ;
-
-    chart.ylabel = function(value) {
-        if(!arguments.length) return ylabel ;
-        ylabel = value ;
-        return chart ;
-    } ;
-
-    return chart;
-}
diff --git a/www/pocwww/pocwww/static/theme.css b/www/pocwww/pocwww/static/theme.css
index ad1982c..f928621 100644
--- a/www/pocwww/pocwww/static/theme.css
+++ b/www/pocwww/pocwww/static/theme.css
@@ -23,6 +23,15 @@ body {
   padding-top: 50px;
 }
 
+.allcaps{
+    text-transform: uppercase;
+    /*font-size: 14px;*/
+    color: #666;
+    font-weight: 400;
+    letter-spacing: 1px;
+    z-index: 100;
+}
+
 
 /*
  * Global add-ons
diff --git a/www/pocwww/pocwww/templates/cardlist.jinja2 b/www/pocwww/pocwww/templates/cardlist.jinja2
index d89f77b..9c610eb 100644
--- a/www/pocwww/pocwww/templates/cardlist.jinja2
+++ b/www/pocwww/pocwww/templates/cardlist.jinja2
@@ -29,3 +29,12 @@
     </table>
 </div>
 {% endblock content %}
+
+{% block card_dates %}
+    <h3>Card Dates</h3>
+    <ul class="nav nav-sidebar">
+    {% for d in datelist %}
+        <li><a href="/cards/{{d.date}}">{{d.date}} <span class="badge">{{d.count}}</span></a></li>
+    {% endfor %}
+    </ul>
+{% endblock card_dates %}
diff --git a/www/pocwww/pocwww/templates/cardsingle.jinja2 b/www/pocwww/pocwww/templates/cardsingle.jinja2
index b6b7f07..355c90c 100644
--- a/www/pocwww/pocwww/templates/cardsingle.jinja2
+++ b/www/pocwww/pocwww/templates/cardsingle.jinja2
@@ -3,38 +3,22 @@
 {% block content %}
 
 <div class="content">
+    <a href="/cards/{{date}}/{{datepage}}"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> BACK</a>
     <h1>{{card.timestamp | datetime('long')}}</h1>
 
+    <canvas id="surfacecard" height="120"></canvas>
+    <canvas id="downholecard" height="120"></canvas>
 
-    <div class="surfacecard card"></div>
-    <div class="downholecard card"></div>
 </div>
 
-<script type="text/javascript" src="{{request.static_url('pocwww:static/cards.js')}}"></script>
 <script>
-var margin = {top: 20, right: 80, bottom: 30, left: 250};
-var surface_data = [ { label: "Surface Card",
-               x: {{card.surface_position}},
-               y: {{card.surface_load}} } ] ;
-var downhole_data = [
-            { label: "Downhole Card",
-              x: {{card.downhole_position}},
-              y: {{card.downhole_load}} } ] ;
-
-var all_position =surface_data[0]['x'].concat(downhole_data[0]['x'])
-
-var xy_chart = d3_card_chart(all_position, margin)
-    .width(960)
-    .height(500)
-    .xlabel("Position")
-    .ylabel("Load") ;
-var surfSvg = d3.select(".surfacecard").append("svg")
-    .datum(surface_data)
-    .call(xy_chart) ;
-
-var downSvg = d3.select(".downholecard").append("svg")
-    .datum(downhole_data)
-    .call(xy_chart) ;
+    var urlparts = decodeURIComponent(window.location).split("/").slice(3)
+    var cardID = parseInt(urlparts[2]);
 
+    $.ajax({
+        dataType: 'json',
+        url:"/json/card/view/" + cardID,
+        success: drawCards
+    });
 </script>
 {% endblock content %}
diff --git a/www/pocwww/pocwww/templates/dashboard.jinja2 b/www/pocwww/pocwww/templates/dashboard.jinja2
index 81ae564..81cf890 100644
--- a/www/pocwww/pocwww/templates/dashboard.jinja2
+++ b/www/pocwww/pocwww/templates/dashboard.jinja2
@@ -1,98 +1,76 @@
 {% extends "layout.jinja2" %}
 
 {% block content %}
-    <div class="content">
-        <h1>Henry Pump POC</h1>
-        <div class="row">
-            <div class="col-xs-6">
-                <h2>Latest Tag Values</h2>
-                {% if tag_values|length > 0 %}
-                <div class="table-responsive">
-                    <table class="table table-striped">
-                        <thead>
+<div class="content">
+    <h1>Henry Pump POC</h1>
+    <div class="row">
+        <div class="col-md-6">
+            <h2>Latest Tag Values</h2>
+            {% if tag_values|length > 0 %}
+            <div class="table-responsive">
+                <table class="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th></th>
+                            <th>Value</th>
+                            <th>Timestamp</th>
+                            <!-- <th>Max</th>
+                            <th>Min</th>
+                            <th>Average</th>
+                            <th>Total</th> -->
+                        </tr>
+                    </thead>
+                    <tbody>
+
+                        {% for t in tag_values %}
                             <tr>
-                                <th>Name</th>
-                                <th></th>
-                                <th>Value</th>
-                                <th>Timestamp</th>
-                                <!-- <th>Max</th>
-                                <th>Min</th>
-                                <th>Average</th>
-                                <th>Total</th> -->
+                                <td><a href="/values/tag/{{t._id}}">{{t._id}}</a></td>
+                                <td>
+                                    <button type="button" class="btn btn-default" title="{{t._id}}" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Max: {{t.max | round(3)}}<br \>
+                                Min: {{t.min | round(3)}}<br \>
+                                Average: {{t.average | round(3)}}<br \>
+                                Total: {{t.total | round(3)}}">
+                                      Details
+                                    </button>
+                                </td>
+                                <td>{{t.value | round(3)}}</td>
+                                <td>{{t.timestamp | datetime('medium')}}</td>
+                                <!-- <td>{{t.max | round(3)}}</td>
+                                <td>{{t.min | round(3)}}</td>
+                                <td>{{t.average | round(3)}}</td>
+                                <td>{{t.total | round(3)}}</td> -->
                             </tr>
-                        </thead>
-                        <tbody>
-
-                            {% for t in tag_values %}
-                                <tr>
-                                    <td><a href="/values/tag/{{t._id}}">{{t._id}}</a></td>
-                                    <td>
-                                        <button type="button" class="btn btn-default" title="{{t._id}}" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Max: {{t.max | round(3)}}<br \>
-                                    Min: {{t.min | round(3)}}<br \>
-                                    Average: {{t.average | round(3)}}<br \>
-                                    Total: {{t.total | round(3)}}">
-                                          Details
-                                        </button>
-                                    </td>
-                                    <td>{{t.value | round(3)}}</td>
-                                    <td>{{t.timestamp | datetime('medium')}}</td>
-                                    <!-- <td>{{t.max | round(3)}}</td>
-                                    <td>{{t.min | round(3)}}</td>
-                                    <td>{{t.average | round(3)}}</td>
-                                    <td>{{t.total | round(3)}}</td> -->
-                                </tr>
-                            {% endfor %}
-
-                        </tbody>
-                    </table>
-                </div>
-                {% else %}
-                <h3>No tag values yet...</h3>
-                {% endif %}
-
+                        {% endfor %}
 
+                    </tbody>
+                </table>
             </div>
-            <div class="col-xs-6">
-                <h2>Latest Card</h2>
-                {% if latest_card|length > 0 %}
-                <h3>{{latest_card.timestamp | datetime('long')}}</h1>
-                <div class="surfacecard card"></div>
-                <div class="downholecard card"></div>
-                {% else %}
-                <h3>No card data yet...</h3>
-                {% endif %}
-            </div>
+            {% else %}
+            <h3>No tag values yet...</h3>
+            {% endif %}
+
+
+        </div>
+        <div class="col-md-6">
+            <h2>Latest Card</h2>
+            {% if card is defined %}
+            <h3>{{card.timestamp | datetime('long')}}</h1>
+                <canvas id="surfacecard" height="140"></canvas>
+                <canvas id="downholecard" height="140"></canvas>
+            {% else %}
+            <h3>No card data yet...</h3>
+            {% endif %}
         </div>
     </div>
+</div>
 
-    <script type="text/javascript" src="{{request.static_url('pocwww:static/cards.js')}}"></script>
-    <script>
-        $(function () {
-            $('[data-toggle="popover"]').popover({html: true})
-        })
-        var margin = {top: 20, right: 10, bottom: 20, left: 40};
-        var surface_data = [ { label: "Surface Card",
-                       x: {{latest_card.surface_position}},
-                       y: {{latest_card.surface_load}} } ] ;
-        var downhole_data = [
-                    { label: "Downhole Card",
-                      x: {{latest_card.downhole_position}},
-                      y: {{latest_card.downhole_load}} } ] ;
+<script>
+    $.ajax({
+        dataType: 'json',
+        url:"/json",
+        success: drawCards
+    });
 
-        var all_position =surface_data[0]['x'].concat(downhole_data[0]['x'])
-
-        var xy_chart = d3_card_chart(all_position, margin)
-            .width($(".surfacecard").width())
-            .height(400)
-            .xlabel("Position")
-            .ylabel("Load") ;
-        var surfSvg = d3.select(".surfacecard").append("svg")
-            .datum(surface_data)
-            .call(xy_chart) ;
-
-        var downSvg = d3.select(".downholecard").append("svg")
-            .datum(downhole_data)
-            .call(xy_chart) ;
-
-    </script>
+</script>
 {% endblock content %}
diff --git a/www/pocwww/pocwww/templates/gaugeoff_all.jinja2 b/www/pocwww/pocwww/templates/gaugeoff_all.jinja2
new file mode 100644
index 0000000..c961e34
--- /dev/null
+++ b/www/pocwww/pocwww/templates/gaugeoff_all.jinja2
@@ -0,0 +1,44 @@
+{% extends "layout.jinja2" %}
+
+{% block content %}
+<div class="content">
+    <div class="row">
+        <div class="col-xs-12">
+            <h2>Gauge Off Data</h2>
+            {% if data is defined %}
+
+            {% for d in data %}
+            <h3 class="allcaps">{{d.date|date('long')}}</h3>
+            <div class="table-responsive">
+                <table class="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Last</th>
+                            <th>Max</th>
+                            <th>Min</th>
+                            <th>Average</th>
+                            <th>Total</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for t in d.tags %}
+                        <tr>
+                            <td>{{t}}</td>
+                            <td>{{d['tags'][t].last | round(3)}}</td>
+                            <td>{{d['tags'][t].max | round(3)}}</td>
+                            <td>{{d['tags'][t].min | round(3)}}</td>
+                            <td>{{d['tags'][t].average | round(3)}}</td>
+                            <td>{{d['tags'][t].total | round(3)}}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="{{request.static_url('pocwww:static/graphs.js')}}"></script>
+{% endblock content %}
diff --git a/www/pocwww/pocwww/templates/layout.jinja2 b/www/pocwww/pocwww/templates/layout.jinja2
index ab1febc..1ea2406 100644
--- a/www/pocwww/pocwww/templates/layout.jinja2
+++ b/www/pocwww/pocwww/templates/layout.jinja2
@@ -31,6 +31,7 @@
     <script src="http://d3js.org/d3.v3.js"></script>
     <script src="{{request.static_url('pocwww:static/moment.min.js')}}"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
+    <script type="text/javascript" src="{{request.static_url('pocwww:static/graphs.js')}}"></script>
     <!-- Latest compiled and minified JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
@@ -56,6 +57,10 @@
             </div>
             <div id="navbar" class="navbar-collapse collapse">
                 <ul class="nav navbar-nav navbar-right">
+                    <li {% if (navgroup == 'dashboard') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/">Dashboard</a></li>
+                    <li {% if (navgroup == 'cards') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/cards">Cards</a></li>
+                    <li {% if (navgroup == 'values') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/values">Values</a></li>
+                    <li {% if (navgroup == 'gaugeoff') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/gaugeoff">Gauge-Off</a></li>
                     <li><a href="/configuration">Configuration</a></li>
                 </ul>
             </div>
@@ -75,6 +80,13 @@
                     <li><a href="/fluidshots">Fluid Shots</a></li>
                     <li><a href="/welltests">Well Tests</a></li>
                 </ul>
+
+                {% block card_dates %}
+                {% endblock card_dates %}
+
+                {% block cards %}
+                {% endblock cards %}
+
             </div>
             <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                 {% block content %}
diff --git a/www/pocwww/pocwww/templates/valuesall.jinja2 b/www/pocwww/pocwww/templates/valuesall.jinja2
index 306fb2a..501e730 100644
--- a/www/pocwww/pocwww/templates/valuesall.jinja2
+++ b/www/pocwww/pocwww/templates/valuesall.jinja2
@@ -60,109 +60,8 @@
     </div>
 </div>
 
-<script type="text/javascript" src="{{request.static_url('pocwww:static/linechart.js')}}"></script>
 <script>
 
-    function drawChart(data){
-        var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
-        var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
-        var graph_data = [] ;
-        var json_data = data.values;
-        var ctx = document.getElementById("valueChart");
-        for (var i = 0; i < json_data.length; i++){
-            var newObj = {
-                label: json_data[i].tagname,
-                fill: false,
-                data: [],
-                lineTension: 0.05,
-                borderColor: color_scale[i % color_scale.length]
-            }
-            for(var j = 0; j < json_data[i].timestamps.length; j++){
-                newObj.data.push({
-                    x: json_data[i].timestamps[j],
-                    y: json_data[i].currentValues[j]
-                });
-            }
-            graph_data.push(newObj);
-        }
-        var scatterChart = new Chart(ctx, {
-            type: 'line',
-            responsive: true,
-            data: {
-                datasets: graph_data
-            },
-            options: {
-                scales: {
-                    xAxes: [{
-                        type: 'time',
-                        position: 'bottom'
-                    }]
-                },
-                legend: {
-                    labels: {
-                        boxWidth: 20
-                    }
-                }
-            }
-        });
-    }
-
-    function drawSlider(data){
-
-        var date_min = new Date(Date.parse(data.first_date));
-        var date_max = new Date(Date.parse(data.last_date));
-        console.log(data);
-
-        var min_val = date_min/1000;
-        var max_val = date_max/1000;
-
-        var urlparts = decodeURIComponent(window.location).split("/").slice(3)
-        var endD = new Date();
-        var end = endD.toISOString().replace("T", " ");
-        var dummyDate = new Date();
-        var startD = new Date(dummyDate.setDate(endD.getDate() - 7));
-        var start = startD.toISOString().replace("T", " ");
-
-
-        var start_date = startD/1000;
-        $('#slider-start').html(start);
-        if(start_date < min_val){
-            start_date = min_val;
-            $('#slider-start').html(date_min.toISOString().replace("T", " "));
-        }
-
-        var end_date = endD/1000;
-        $('#slider-end').html(end);
-        if(end_date > max_val){
-            end_date = max_val;
-            $('#slider-end').html(date_max.toISOString().replace("T", " "));
-        }
-
-        $("#slider-range").slider({
-            range: true,
-            min: min_val,
-            max: max_val,
-            step: 10,
-            values: [start_date, end_date],
-            slide: function (e, ui) {
-                var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
-                $('#slider-start').html(dt_cur_from.toISOString().replace("T", " "));
-
-                var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
-                $('#slider-end').html(dt_cur_to.toISOString().replace("T", " "));
-            },
-            stop: function(e, ui){
-                var startD = new Date(ui.values[0]*1000);
-                var endD = new Date(ui.values[1]*1000);
-                $.ajax({
-                    dataType: 'json',
-                    url:"/json/values/between/" + startD.toISOString() + "/" + endD.toISOString(),
-                    success: drawChart
-                });
-            }
-        });
-    }
-
     var urlparts = decodeURIComponent(window.location).split("/").slice(3)
     var endD = new Date();
     var end = endD.toISOString();
diff --git a/www/pocwww/pocwww/view_helpers.py b/www/pocwww/pocwww/view_helpers.py
index 45e227e..f71ac37 100644
--- a/www/pocwww/pocwww/view_helpers.py
+++ b/www/pocwww/pocwww/view_helpers.py
@@ -55,3 +55,23 @@ def card_page(request):
 
     cards = request.db['cards'].find({'timestamp': {'$lt': cards_date_end, '$gte': cards_date_start}}).sort("timestamp", -1).skip(num_per_page * (page_num - 1)).limit(num_per_page)
     return {'cards': list(cards), 'pagination': Pagination(page_num, num_per_page, num_cards), 'cards_date': cards_date_start.strftime("%Y-%m-%d"), 'navgroup': 'cards'}
+
+
+def get_all_dates_with_cards(request):
+    datelist = []
+    dateagg = request.db['cards'].aggregate([
+        {"$group": {
+            "_id": {"$concat": [
+                {"$substr": [{"$year": "$timestamp"}, 0, 4]},
+                "-",
+                {"$substr": [{"$month": "$timestamp"}, 0, 2]},
+                "-",
+                {"$substr": [{"$dayOfMonth": "$timestamp"}, 0, 2]},
+            ]},
+            "count": {"$sum": 1}
+        }},
+        {"$sort": {"_id": -1}}
+    ])
+    for d in dateagg:
+        datelist.append({'count': d['count'], 'date': datetime.strptime(d['_id'], "%Y-%m-%d").date()})
+    return list(datelist)
diff --git a/www/pocwww/pocwww/views.py b/www/pocwww/pocwww/views.py
index 52f75dd..691482b 100644
--- a/www/pocwww/pocwww/views.py
+++ b/www/pocwww/pocwww/views.py
@@ -6,29 +6,13 @@ from .view_helpers import *
 @view_config(route_name='home', renderer='templates/dashboard.jinja2')
 @view_config(route_name="json_snapshot", renderer="prettyjson")
 def my_view(request):
-    return {'project': 'POC Web Interface', 'navgroup': 'dashboard', 'tag_values': get_lastest_tag_values(request), 'latest_card': get_latest_card(request)}
+    return {'project': 'POC Web Interface', 'navgroup': 'dashboard', 'tag_values': get_lastest_tag_values(request), 'card': get_latest_card(request)}
 
 
 @view_config(route_name='cards', renderer='templates/datelist.jinja2')
 @view_config(route_name='json_cards', renderer='prettyjson')
 def cards(request):
-    datelist = []
-    dateagg = request.db['cards'].aggregate([
-        {"$group": {
-            "_id": {"$concat": [
-                {"$substr": [{"$year": "$timestamp"}, 0, 4]},
-                "-",
-                {"$substr": [{"$month": "$timestamp"}, 0, 2]},
-                "-",
-                {"$substr": [{"$dayOfMonth": "$timestamp"}, 0, 2]},
-            ]},
-            "count": {"$sum": 1}
-        }},
-        {"$sort": {"_id": -1}}
-    ])
-    for d in dateagg:
-        datelist.append({'count': d['count'], 'date': datetime.strptime(d['_id'], "%Y-%m-%d").date()})
-    return {'datelist': list(datelist), 'navgroup': 'cards'}
+    return {'datelist': get_all_dates_with_cards(request), 'navgroup': 'cards'}
 
 
 @view_config(route_name='cards_date', renderer='templates/cardlist.jinja2')
@@ -36,7 +20,9 @@ def cards(request):
 @view_config(route_name='json_cards_date', renderer='prettyjson')
 @view_config(route_name='json_cards_page', renderer='prettyjson')
 def cards_page(request):
-    return card_page(request)
+    cp = card_page(request)
+    cp['datelist'] = get_all_dates_with_cards(request)
+    return cp
 
 
 @view_config(route_name='card_single', renderer='templates/cardsingle.jinja2')
@@ -48,7 +34,15 @@ def card_single(request):
     except IndexError:
         pass
 
-    return {"card": card, 'navgroup': 'cards'}
+    datepage_url = request.referrer.split("/")[3:]
+    page_num = 1
+    carddate = ""
+    if len(datepage_url) > 2:
+        page_num = int(datepage_url[2])
+    if len(datepage_url) > 1:
+        carddate = datepage_url[1]
+
+    return {"card": card, 'navgroup': 'cards', 'datelist': get_all_dates_with_cards(request), 'date': carddate, 'datepage': page_num}
 
 
 @view_config(route_name='values_all', renderer="templates/valuesall.jinja2")
@@ -70,3 +64,47 @@ def values_tag(request):
 
     tag_data = list(map(rem_id, single_tag))
     return {'navgroup': 'values', 'tag_values': tag_data, 'tagname': tagname}
+
+
+@view_config(route_name="gaugeoff_all", renderer="templates/gaugeoff_all.jinja2")
+@view_config(route_name="json_gaugeoff_all", renderer="prettyjson")
+def gaugeoff_all(request):
+    gaugeoff_list = []
+    dateagg = list(request.db['gaugeOff'].aggregate(
+        [
+            {
+                '$project': {
+                    'yearMonthDay': {'$dateToString': {'format': "%Y-%m-%d", 'date': "$timestamp"}},
+                    'tagname': 1,
+                    'dailyTotal': 1,
+                    'dailyAverage': 1,
+                    'maxDailyValue': 1,
+                    'minDailyValue': 1,
+                    'currentValue': 1
+                }
+            },
+            {
+                '$group': {
+                    '_id': "$yearMonthDay",
+                    'tags': {'$push': {'name': "$tagname"}},
+                    'totals': {'$push': {'total': "$dailyTotal"}},
+                    'averages': {'$push': {'average': "$dailyAverage"}},
+                    'max': {'$push': {'max': "$maxDailyValue"}},
+                    'min': {'$push': {'min': "$minDailyValue"}},
+                    'last': {'$push': {'last': "$currentValue"}}
+                }
+            }
+        ]))
+    for d in dateagg:
+        newGO = {'date': datetime.strptime(d["_id"], '%Y-%m-%d'), 'tags': {}}
+        for i in range(0, len(d['tags'])):
+            newTagObj = {
+                "max": d['max'][i]['max'],
+                "min": d['min'][i]['min'],
+                "last": d['last'][i]['last'],
+                "total": d['totals'][i]['total'],
+                "average": d['averages'][i]['average'],
+            }
+            newGO['tags'][d['tags'][i]['name']] = newTagObj
+        gaugeoff_list.append(newGO)
+    return {'navgroup': 'gaugeoff', 'data': gaugeoff_list}