var d3_control = function(element, svgurl, mapping) { this.mapping = mapping; this.element = element; var control = this; d3.xml(svgurl, "image/svg+xml", function(xml) { element[0][0].appendChild(xml.documentElement); // Setup mapping for (var element_id in this.mapping) { control.initElement(element_id); } d3.json("../all_values", function(response) { control.process(response.data); control.reload(response.time_stop); }); }); }; d3_control.prototype = { initElement:function(element_id) { var options = this.mapping[element_id]; d3.select(document.getElementById(element_id)) .on("click", function() { var elem = d3.select(this); var popup = d3.select("body") .append("div") .classed("popup", true) .style("top", d3.event.clientY-5) .style("left", d3.event.clientX-5) .on("click", function() { d3.select(this).remove(); }); popup.append("div") .text(options.sensor); var startdate = (new Date().getTime()/1000) - 7*60*60*24; var enddate = (new Date().getTime()/1000); var plot = d3.plot(popup); d3.json("../sensor/"+options.sensor+"/" + startdate + "/" + enddate, function(resp) { var data = resp.data.map(function(d) { return [new Date(d[0]), d[1]]; }); plot.draw(data); }); }); }, process:function(data) { for (var i in data) { var row = data[i]; if (typeof(console) != "undefined") { console.log("[" + d3.format("02d")(row.timestamp) + "] " + row.name + " Value: " + row.value_real + " - " + row.value_string); } for (var element_id in this.mapping) { var options = this.mapping[element_id]; if (row.name == options.sensor){ d3.select(document.getElementById(element_id)) .text(""+row.value_real); } } } }, reload:function(time_stop) { var url = "../stream"; if (time_stop != null) url += "/" + time_stop; var control = this; d3.json(url, function(response) { control.process(response.data); control.reload(response.time_stop); }); } }; d3.control = function(element, svgurl, mapping) { return new d3_control(element,svgurl,mapping); };