diff options
| author | Yves Fischer <yvesf-git@xapek.org> | 2011-12-07 00:17:50 +0100 |
|---|---|---|
| committer | Yves Fischer <yvesf-git@xapek.org> | 2011-12-07 00:18:16 +0100 |
| commit | 0645c27fbd1082fe70e08a049e2cbb0200fd3cb6 (patch) | |
| tree | 1d68d2ef4483a4e61dab747a357a74b244b30b88 /ebus/webapp/static/console.html | |
| parent | 1dc2d432b455575b4a43c62f01a2ea7400589575 (diff) | |
| download | ebus-alt-0645c27fbd1082fe70e08a049e2cbb0200fd3cb6.tar.gz ebus-alt-0645c27fbd1082fe70e08a049e2cbb0200fd3cb6.zip | |
verwende d3.time; schönerer Graph
Diffstat (limited to 'ebus/webapp/static/console.html')
| -rw-r--r-- | ebus/webapp/static/console.html | 77 |
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(); }); }); } |