1 files changed, 66 insertions, 11 deletions
diff --git a/ebus/webapp/static/console.html b/ebus/webapp/static/console.html
index 054d5d4..b8b732b 100644
--- a/ebus/webapp/static/console.html
+++ b/ebus/webapp/static/console.html
@@ -1,20 +1,23 @@
 <html>
 <head>
     <script src="lib/d3-v2.6.1/d3.js"></script>
+    <script src="lib/d3-v2.6.1/d3.time.js"></script>
     <style>
         path {
             stroke: steelblue;
             stroke-width: 2;
             fill: none;
         }
-
         line {
             stroke: black;
         }
         div.popup {
             position: absolute;
             border: 2px solid gray;
-            background-color: yellow;
+            background-color: #fefefe;
+        }
+        div.popup .plot {
+            margin: 5px;
         }
         #log {
             height: 300px;
@@ -34,8 +37,11 @@
         "boilerWert" : "feuerungsautomat1.betriebsdatenRegler1.boilerTemperatur"
     };
     function timeToString(timestamp) {
-        var f = d3.format("02d");
         var d = new Date();
+        return dateToString(d);
+    }
+    function dateToString(d) {
+        var f = d3.format("02d");
         return f(d.getHours()) + ":" + f(d.getMinutes()) + ":" + f(d.getSeconds());
     }
     function log(data) {
@@ -82,28 +88,77 @@
 
                 var w = 550, h = 200, margin = 20;
                 var plot = popup.append("svg:svg")
+                            .classed("plot", true)
                             .attr("width", w)
                             .attr("height", h);
 
-                var startdate = (new Date().getTime()/1000) - 1*60*60*24
+                var wait_indicator = plot.append("svg:text")
+                    .attr("x", w/2)
+                    .attr("y", h/2)
+                    .text("Bitte Warten");
+
+                var startdate = (new Date().getTime()/1000) - 7*60*60*24
                 var enddate = (new Date().getTime()/1000)
                 d3.json("../sensor/"+sensor_name+"/" + startdate + "/" + enddate, function(resp) {
+                    var data = resp.data.map(function(d) {
+                        return [new Date(d[0]), d[1]];
+                    })
+                    var x_min = d3.min(data, function(d){return d[0]}),
+                        x_max = d3.max(data, function(d){return d[0]}),
+                        y_min = d3.min(data, function(d){return d[1]}),
+                        y_max = d3.max(data, function(d){return d[1]});
+
                     var y = d3.scale.linear()
-                        .domain([0, d3.max(resp.data, function(d){return d[1];})])
+                        .domain([y_min, y_max])
                         .range([0+margin, h-margin]);
-                    var x = d3.scale.linear()
-                        .domain([0, resp.data.length])
-                        .range([0+margin, w-margin]);
 
+                    var x = d3.time.scale()
+                        .domain([x_min, x_max])
+                        .range([0+margin, w-margin]);
+                    
                     var g = plot.append("svg:g")
                             .attr("transform", "translate(0, "+h+")");
 
                     var line = d3.svg.line()
-                                .x(function(d,i){return x(i); })
-                                .y(function(d) {return -1 * y(d[1]);});
+                                .x(function(d,i){ return x(d[0]); })
+                                .y(function(d) {return -1*y(d[1]);});
 
                     g.append("svg:path")
-                        .attr("d", line(resp.data));
+                        .attr("d", line(data));
+
+                    // Axes
+                    g.append("svg:line")
+                        .attr("x1", x(x_min))
+                        .attr("y1", -1 * y(y_min))
+                        .attr("x2", x(x_max))
+                        .attr("y2", -1 * y(y_min));
+
+                    g.append("svg:line")
+                        .attr("x1", x(x_min))
+                        .attr("y1", -1*y(y_min))
+                        .attr("x2", x(x_min))
+                        .attr("y2", -1*y(y_max));
+                        
+                 
+                    // Ticks
+                    var tick_format = d3.time.format("%d.%m");
+                    g.selectAll(".xlabel")
+                        .data(x.ticks(5)).enter()
+                        .append("svg:text")
+                        .text(function(d){return tick_format(d) })
+                        .attr("x", function(d) { return x(d) })
+                        .attr("y", 0)
+                        .attr("text-anchor", "middle");
+
+                    g.selectAll(".ylabel")
+                        .data(y.ticks(5)).enter()
+                        .append("svg:text")
+                        .text(String)
+                        .attr("x", 0)
+                        .attr("y", function(d) {return -1*y(d)})
+                        .attr("text-anchor", "right");
+
+                    wait_indicator.remove();
                 });
             });
         }