001: //----------------------------------------------------------------------
002: //
003: // http://bl.ocks.org/d3noob/ccdcb7673cdb3a796e13
004: // 
005: //----------------------------------------------------------------------
006: 
007: var margin = {top: 20, right: 50, bottom: 30, left: 50},
008:     width = 600 - margin.left - margin.right,
009:     height = 200 - margin.top - margin.bottom;
010: 
011: var svg = d3.select("#graphContainer").append("svg")
012:     .attr("width", width + margin.left + margin.right)
013:     .attr("height", height + margin.top + margin.bottom)
014:     .attr("width", 600)
015:     .attr("height", 200)
016:     .attr("opacity", 1)
017:     //.style("stroke", "blue")
018:     //.style("fill", "green")
019:     .style("background", "#CCFFFF")
020: 
021:     //.style("border", "2px solid red")
022:     .on("mousedown", mouseDown)
023:     .on("mouseup", mouseUp)
024:     .on("click", mouseClick)
025:     .on("mousemove", mouseMove)
026:     .append("g")
027:     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
028: 
029: var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
030: 
031: //var x = d3.time.scale().range([0, width]);
032: 
033: var x = d3.time.scale().range([0,width]).nice(d3.time.day, 1)
034: 
035: var y = d3.scale.linear().range([height, 0]);
036: 
037: var xAxis = d3.svg.axis().scale(x)
038:     //.ticks(d3.time.hour, 1)
039:     //.ticks(200)
040:     .tickFormat(d3.time.format('%H:%M'))
041:     //.tickPadding(10)
042:     .orient("bottom");
043: 
044: var yAxisLeft = d3.svg.axis()
045:     .scale(y)
046:     //.tickSize(-width, 0, 0)
047:     .tickSize(-width, 0, 0)
048:     .orient("left");
049: 
050: var line = d3.svg.line()
051:     .x(function(d) { return x(d.the_time); })
052:     .y(function(d) { return y(d.the_temp); })
053:     .interpolate("step");
054: 
055: //d3.json("./get-some-time-data.php",function(error, json) {
056: d3.json("./get-stove-temp.php",function(error, json) {
057:     if(error) return console.warn(error);
058:     data = json;
059: 
060:     data.forEach(function(d) {
061:         //draw_box(d.x, d.y, d.dx, d.dy);
062: 
063: 
064:         d.the_time = parseDate(d.time);
065:         d.the_temp = +d.temp;
066: 
067:         //draw_circle(d.the_time, d.the_temp, 4);
068: 
069:         //console.log("time  " + d.the_time );
070:         //console.log("temp  " + d.the_temp );
071:         //console.log("d.y  " + d.y );
072:     });
073: 
074: 
075: var area = d3.svg.area()
076:     .interpolate("step")
077:     .x(function(d) { return x(d.the_time); })
078:     .y(height)
079:     .y1(function(d) { return y(d.the_temp); });
080: 
081:     x.domain(d3.extent(data, function(d) { return d.the_time; })).nice(d3.time.day, 1);
082:     y.domain([d3.min(data, function(d) {return d.the_temp; })-5, d3.max(data, function(d) { return d.the_temp; })+5]);
083:     
084:     svg.append("g")
085:         .attr("class", "x axis")
086:         //.attr("ckass", "grid")
087:         .attr("transform", "translate(0," + height + ")")
088:         .call(xAxis)
089:         .selectAll("text")
090:         .attr("y", 0)
091:         .attr("x", 9)
092:         .attr("font-size", 10)
093:         .attr("font-family", "sans-serif")
094:         .attr("dy", ".35em")
095:         .attr("transform", "rotate(50)")
096:         .style("text-anchor", "start");
097:   
098:     svg.append("g")
099:         .attr("class", "y axis grid")
100:         .attr("font-size", 10)
101:         .attr("font-family", "sans-serif")
102:     //.attr("class", "grid"
103:         .call(yAxisLeft)
104:         .append("text")
105:         .attr("font-size", 10)
106:         .attr("transform", "rotate(-90)")
107:         .attr("y", 6)
108:         .attr("dy", "-3em")
109:         .style("text-anchor", "end")
110:         .text("temp");
111: 
112:     svg.append("path")
113:         .datum(data)
114:         .attr("class", "area")
115:         //.style("border", "10px solid red")
116:         .attr("opacity", 0.7)
117:         .style("stroke", "red")
118:         .style("fill", "none")
119:         .attr("d", line); 
120: 
121:     
122: });
123: 
124: 
125: //----------------------------------------------------------------------
126: //
127: //----------------------------------------------------------------------
128: function draw_box(x,y, dx, dy) {
129:  
130:    svg.append("rect")
131:        .attr("height", dy)
132:        .attr("id", "the_area")
133:        .attr("width", dx)
134:        .attr("x", x )
135:        .attr("y", y)
136:        .attr("opacity", .35)
137:        .style("stroke", "blue")
138:        .style("fill", "green");
139: 
140: }
141: 
142: //----------------------------------------------------------------------
143: //
144: //----------------------------------------------------------------------
145: function draw_circle(x,y,r)
146: {
147: 
148:     //var x_pos = parseInt(x);
149:     //var y_pos = parseInt(x);
150: 
151:    svg.append("circle")
152:        .attr("cx", x)
153:        .attr("cy", y)
154:        .attr("r", r)
155:        .attr("id", "the_circle")
156:        .attr("opacity", .35)
157:        .style("stroke", "red")
158:        .style("fill", "blue");
159: 
160: }
161: 
162: //----------------------------------------------------------------------
163: //
164: //----------------------------------------------------------------------
165: function mouseDown() {
166: 
167: 
168:     var height = 30;
169:     var width = 30;
170:     //var x_pos = 40;
171: 
172:     var x_pos = d3.mouse(this)[0];
173: 
174:     //var y_pos = 40;
175: 
176:     var y_pos = d3.mouse(this)[1];
177: 
178:     svg.append("rect")
179:        .attr("height", height)
180:        .attr("id", "the_area")
181:        .attr("width", width)
182:        .attr("x", x_pos )
183:        .attr("y", y_pos)
184:        .attr("opacity", .35)
185:        .style("stroke", "red")
186:        .style("fill", "green");
187: 
188: /*
189:     svg.append("rect")
190:        .attr("height", height)
191:        .attr("id", "the_area")
192:        .attr("width", x_end - x_start)
193:        .attr("x", x_start - 52 )
194:        .attr("y", 0)
195:        .attr("opacity", .35)
196:        .style("stroke", "red")
197:        .style("fill", "green");
198: */
199: 
200: 
201:     //alert("Down");
202: }
203: 
204: 
205: //----------------------------------------------------------------------
206: //
207: //----------------------------------------------------------------------
208: function mouseMove() {
209:    // alert("Move");
210: }
211: 
212: //----------------------------------------------------------------------
213: //
214: //----------------------------------------------------------------------
215: function mouseUp() {
216:    //alert("Up");
217: }
218: 
219: //----------------------------------------------------------------------
220: //
221: //----------------------------------------------------------------------
222: function mouseClick() {
223:     //alert("Click");
224: }
225: 
226: //----------------------------------------------------------------------
227: //
228: //----------------------------------------------------------------------
229: //$().ready(function()
230: //{
231: 
232: 
233:     //window.alert("demo");
234: 
235: //});
236: 
237: 
238: