... <html> <body> <script src='../../d3.v2.js'></script> <div id='container'></div> <script> var vis = d3.select('#container') .append('svg:svg') .attr('width',w) .attr('height',h); </script> </body> ...
In this we demonstrate how to plot with D3.js
A small part of the logfile looks like this.
... 2016-01-15 18:41:10 4B000004C84F3728 61.44 Trottle 0 2016-01-15 18:41:30 A9000004C7AAD428 61.19 Stove motor on 2016-01-15 18:41:33 EE000000512FB128 56.94 Tank motor on 2016-01-15 18:41:36 4B000004C84F3728 61.69 Trottle 0 2016-01-15 18:41:56 A9000004C7AAD428 61.38 Stove motor on 2016-01-15 18:41:59 EE000000512FB128 56.94 Tank motor on 2016-01-15 18:42:02 4B000004C84F3728 61.94 Trottle 0 2016-01-15 18:42:22 A9000004C7AAD428 61.56 Stove motor on 2016-01-15 18:42:25 EE000000512FB128 56.88 Tank motor on 2016-01-15 18:42:28 4B000004C84F3728 62.25 Trottle 90 2016-01-15 18:42:48 A9000004C7AAD428 61.75 Stove motor on 2016-01-15 18:42:51 EE000000512FB128 56.88 Tank motor on 2016-01-15 18:42:54 4B000004C84F3728 62.44 Trottle 90 2016-01-15 18:43:14 A9000004C7AAD428 61.88 Stove motor on 2016-01-15 18:43:17 EE000000512FB128 56.88 Tank motor on 2016-01-15 18:43:20 4B000004C84F3728 62.69 Trottle 90 2016-01-15 18:43:40 A9000004C7AAD428 61.94 Stove motor on 2016-01-15 18:43:43 EE000000512FB128 56.88 Tank motor on 2016-01-15 18:43:46 4B000004C84F3728 62.94 Trottle 90 2016-01-15 18:44:06 A9000004C7AAD428 62.19 Stove motor on 2016-01-15 18:44:09 EE000000512FB128 56.88 Tank motor on 2016-01-15 18:44:12 4B000004C84F3728 63.06 Trottle 90 2016-01-15 18:44:32 A9000004C7AAD428 62.25 Stove motor on 2016-01-15 18:44:34 EE000000512FB128 56.94 Tank motor on 2016-01-15 18:44:37 4B000004C84F3728 63.19 Trottle 90 2016-01-15 18:44:57 A9000004C7AAD428 62.44 Stove motor on 2016-01-15 18:45:01 EE000000512FB128 56.94 Tank motor on 2016-01-15 18:45:04 4B000004C84F3728 63.38 Trottle 90 ...
The php file that process this file.
source-highlight -n --input=get-stove-temp.php --output=src/get-stove-temp.php.html
01: <?php
02: //----------------------------------------------------------------------
03: // get-stove-temp.php
04: //----------------------------------------------------------------------
05:
06: // $txt_file = file_get_contents("/home/gorhas/public_html/d3/stoved.log");
07:
08: $file = fopen("/home/gorhas/public_html/framework/stoved.log", "r");
09:
10: // $rows = explode("\n", $txt_file);
11:
12: // array_shift($rows);
13:
14: $time_data = array();
15:
16: while(!feof($file))
17: {
18:
19: //foreach($rows as $row => $data)
20: //{
21:
22: $line = fgets($file);
23:
24: //get row data
25: $row_data = explode(' ', $line);
26:
27: //$info[$row]['id'] = $row_data[0];
28: //$info[$row]['name'] = $row_data[1];
29: //$info[$row]['description'] = $row_data[2];
30: //$info[$row]['images'] = $row_data[3];
31:
32: if($row_data[0] == '2016-01-15' && $row_data[2] == 'EE000000512FB128')
33: {
34:
35: $values = array("time" => $row_data[0] . " " . $row_data[1],
36: "temp"=> $row_data[3]);
37:
38:
39: array_push($time_data, $values);
40:
41: //display data
42: //echo ' Date: ' . $row_data[0] . '<br />';
43: //echo ' Time: ' . $row_data[1] . '<br />';
44: //echo ' Id: ' . $row_data[2] . '<br />';
45: //echo ' Temp: ' . $row_data[3] . '<br />';
46:
47: //printf("\n");
48:
49: //echo '<br />\r\n';
50:
51: }
52:
53: }
54:
55: echo json_encode($time_data);
56: //----------------------------------------------------------------------
57: //
58: //----------------------------------------------------------------------
59: ?>
60:
61:
source-highlight -n --input=libs/graph-simple.js --output=src/graph-simple.js.html
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: