diff options
Diffstat (limited to 'ebus/webhdf/static/src/d3.plot.js')
| -rw-r--r-- | ebus/webhdf/static/src/d3.plot.js | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/ebus/webhdf/static/src/d3.plot.js b/ebus/webhdf/static/src/d3.plot.js new file mode 100644 index 0000000..d9a7d04 --- /dev/null +++ b/ebus/webhdf/static/src/d3.plot.js @@ -0,0 +1,99 @@ +(function(){ + +function d3_plot(container) { + this.opt = { + w:550, h:200, margin:30 + }; + this.element = container.append("svg:g") + .classed("d3.plot_plot",true) + .attr("width", this.opt.w) + .attr("height", this.opt.h); + + this.element.append("svg:rect") + .attr("width", this.opt.w) + .attr("height", this.opt.h) + .style("fill", "white"); + + this.element.append("svg:text") + .classed("d3-plot_wait", true) + .attr("x", this.opt.w/2) + .attr("y", this.opt.h/2) + .attr("text-anchor", "center") + .text("Bitte warten"); +}; + +d3_plot.prototype = { + draw: function(data) { + 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 x = d3.time.scale() + .domain([x_min, x_max]) + .range([0+this.opt.margin, this.opt.w-this.opt.margin]); + + var y = d3.scale.linear() + .domain([y_min, y_max]) + .range([0+this.opt.margin, this.opt.h-(this.opt.margin/2)]); + + + var g = this.element.append("svg:g") + .attr("transform", "translate(0, "+this.opt.h+")"); + + var line = d3.svg.line() + .x(function(d,i){ return x(d[0]); }) + .y(function(d) {return -1*y(d[1]);}); + + g.append("svg:path") + .attr("d", line(data)); + + // Axes X-Line + g.append("svg:line") + .attr("x1", 0) + .attr("y1", -1*y(y_min)) + .attr("x2", x(x_max)) + .attr("y2", -1 * y(y_min)); + + + // Tick Labels + 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", -5) + .attr("text-anchor", "center"); + + 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"); + + // X-Lines + g.selectAll(".xlines") + .data(x.ticks(5)).enter() + .append("svg:line") + .style("fill", "none") + .style("stroke", "#000000") + .style("stroke-width", 0.5) + .style("stroke-dasharray", "6,1") + .attr("x1", function(d){return x(d);}) + .attr("y1", -1*y(y_min)+(this.opt.margin/3)) + .attr("x2", function(d){return x(d);}) + .attr("y2", -1*y(y_max)); + + // + this.element.select(".d3-plot_wait").style("display","none"); + } +}; + +d3.plot = function(container) { + return new d3_plot(container); +}; + +})();
\ No newline at end of file |