Commit | Line | Data |
---|---|---|
8c5fe59e DV |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
93a5bb4c | 4 | <link rel="stylesheet" href="../css/dygraph.css"> |
8c5fe59e | 5 | <title>Dygraphs Drawing Demo</title> |
7e5ddc94 DV |
6 | <!-- |
7 | For production (minified) code, use: | |
8 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
9 | --> | |
fbd6834a | 10 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 11 | |
fc7d0ef1 | 12 | <script> |
8c5fe59e DV |
13 | var start_date = new Date("2002/12/29").getTime(); |
14 | var end_date = new Date().getTime(); | |
15 | data = []; | |
16 | for (var d = start_date; d < end_date; d += 604800 * 1000) { | |
17 | var millis = d + 2 * 3600 * 1000; | |
fc7d0ef1 DV |
18 | var date = new Date(millis); |
19 | var yyyy = date.getFullYear(), | |
20 | mm = date.getMonth(), | |
21 | dd = date.getDate(); | |
22 | data.push( [ new Date(Date.UTC(yyyy, mm, dd)), 50 ]); | |
8c5fe59e DV |
23 | } |
24 | </script> | |
fc7d0ef1 DV |
25 | |
26 | <style> | |
8c5fe59e DV |
27 | #tool_zoom { |
28 | background: url('drawing/tool-palette.png'); | |
86cf5a64 | 29 | background-position: 0px 0px; |
8c5fe59e DV |
30 | width: 32px; |
31 | height: 33px; | |
32 | margin-left: 50px; | |
33 | display: inline-block; | |
34 | } | |
35 | #tool_pencil { | |
36 | background: url('drawing/tool-palette.png'); | |
86cf5a64 | 37 | background-position: -32px 0px; |
8c5fe59e DV |
38 | width: 32px; |
39 | height: 33px; | |
40 | display: inline-block; | |
41 | } | |
42 | #tool_eraser { | |
43 | background: url('drawing/tool-palette.png'); | |
86cf5a64 | 44 | background-position: -64px 0px; |
8c5fe59e DV |
45 | width: 33px; |
46 | height: 33px; | |
47 | display: inline-block; | |
48 | } | |
49 | #toolbar { | |
50 | display: inline-block; | |
51 | } | |
52 | </style> | |
53 | </head> | |
54 | <body> | |
55 | <h2>Time Series Drawing Demo</h2> | |
56 | <div id='toolbar'> | |
57 | <div id="tool_zoom" onClick='change_tool(this)'></div><div id="tool_pencil" onClick='change_tool(this)'></div><div id="tool_eraser" onClick='change_tool(this)'></div> | |
58 | </div> | |
59 | <div id="draw_div" style="width: 800px; height: 400px;"></div> | |
60 | ||
61 | <script type="text/javascript"> | |
62 | var isDrawing = false; | |
63 | var lastDrawRow = null, lastDrawValue = null; | |
64 | var tool = 'pencil'; | |
65 | var valueRange = [0, 100]; | |
66 | ||
67 | function setPoint(event, g, context) { | |
fc7d0ef1 DV |
68 | var pos = Dygraph.findPos(g.graphDiv); |
69 | var canvasx = Dygraph.pageX(event) - pos.x; | |
70 | var canvasy = Dygraph.pageY(event) - pos.y; | |
8c5fe59e DV |
71 | var xy = g.toDataCoords(canvasx, canvasy); |
72 | var x = xy[0], value = xy[1]; | |
73 | var rows = g.numRows(); | |
74 | var closest_row = -1; | |
75 | var smallest_diff = -1; | |
76 | // TODO(danvk): binary search | |
77 | for (var row = 0; row < rows; row++) { | |
78 | var date = g.getValue(row, 0); // millis | |
79 | var diff = Math.abs(date - x); | |
80 | if (smallest_diff < 0 || diff < smallest_diff) { | |
81 | smallest_diff = diff; | |
82 | closest_row = row; | |
83 | } | |
84 | } | |
85 | ||
86 | if (closest_row != -1) { | |
87 | if (lastDrawRow === null) { | |
88 | lastDrawRow = closest_row; | |
89 | lastDrawValue = value; | |
90 | } | |
91 | var coeff = (value - lastDrawValue) / (closest_row - lastDrawRow); | |
92 | if (closest_row == lastDrawRow) coeff = 0.0; | |
93 | var minRow = Math.min(lastDrawRow, closest_row); | |
94 | var maxRow = Math.max(lastDrawRow, closest_row); | |
95 | for (var row = minRow; row <= maxRow; row++) { | |
96 | if (tool == 'pencil') { | |
97 | var val = lastDrawValue + coeff * (row - lastDrawRow); | |
98 | val = Math.max(valueRange[0], Math.min(val, valueRange[1])); | |
99 | data[row][1] = val; | |
100 | if (val == null || isNaN(val)) console.log(val); | |
101 | } else if (tool == 'eraser') { | |
102 | data[row][1] = null; | |
103 | } | |
104 | } | |
105 | lastDrawRow = closest_row; | |
106 | lastDrawValue = value; | |
107 | g.updateOptions({ file: data }); | |
108 | g.setSelection(closest_row); // prevents the dot from being finnicky. | |
109 | } | |
110 | } | |
111 | ||
112 | function finishDraw() { | |
113 | isDrawing = false; | |
114 | lastDrawRow = null; | |
115 | lastDrawValue = null; | |
116 | } | |
117 | ||
118 | function change_tool(tool_div) { | |
86cf5a64 | 119 | var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser']; |
8c5fe59e | 120 | for (var i = 0; i < ids.length; i++) { |
86cf5a64 DV |
121 | var div = document.getElementById(ids[i]); |
122 | if (div == tool_div) { | |
123 | div.style.backgroundPosition = -(i * 32) + 'px -32px'; | |
124 | } else { | |
125 | div.style.backgroundPosition = -(i * 32) + 'px 0px'; | |
126 | } | |
8c5fe59e | 127 | } |
8c5fe59e DV |
128 | tool = tool_div.id.replace('tool_', ''); |
129 | ||
130 | var dg_div = document.getElementById("draw_div"); | |
131 | if (tool == 'pencil') { | |
132 | dg_div.style.cursor = 'url(drawing/cursor-pencil.png) 2 30, auto'; | |
133 | } else if (tool == 'eraser') { | |
134 | dg_div.style.cursor = 'url(drawing/cursor-eraser.png) 10 30, auto'; | |
135 | } else if (tool == 'zoom') { | |
136 | dg_div.style.cursor = 'crosshair'; | |
137 | } | |
138 | } | |
139 | change_tool(document.getElementById("tool_pencil")); | |
140 | ||
141 | g = new Dygraph(document.getElementById("draw_div"), data, | |
142 | { | |
143 | valueRange: valueRange, | |
144 | labels: [ 'Date', 'Value' ], | |
fc7d0ef1 | 145 | labelsUTC: true, |
8c5fe59e DV |
146 | interactionModel: { |
147 | mousedown: function (event, g, context) { | |
148 | if (tool == 'zoom') { | |
149 | Dygraph.defaultInteractionModel.mousedown(event, g, context); | |
150 | } else { | |
178b1e0a | 151 | event.preventDefault(); // Firefox, Chrome, etc. |
8c5fe59e DV |
152 | isDrawing = true; |
153 | setPoint(event, g, context); | |
154 | } | |
155 | }, | |
156 | mousemove: function (event, g, context) { | |
157 | if (tool == 'zoom') { | |
8c5fe59e DV |
158 | } else { |
159 | if (!isDrawing) return; | |
160 | setPoint(event, g, context); | |
161 | } | |
162 | }, | |
163 | mouseup: function(event, g, context) { | |
164 | if (tool == 'zoom') { | |
8c5fe59e DV |
165 | } else { |
166 | finishDraw(); | |
167 | } | |
168 | }, | |
169 | mouseout: function(event, g, context) { | |
170 | if (tool == 'zoom') { | |
8c5fe59e DV |
171 | } |
172 | }, | |
173 | dblclick: function(event, g, context) { | |
174 | Dygraph.defaultInteractionModel.dblclick(event, g, context); | |
175 | }, | |
176 | mousewheel: function(event, g, context) { | |
177 | var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40; | |
178 | var percentage = normal / 50; | |
179 | var axis = g.xAxisRange(); | |
180 | var xOffset = g.toDomCoords(axis[0], null)[0]; | |
181 | var x = event.offsetX - xOffset; | |
182 | var w = g.toDomCoords(axis[1], null)[0] - xOffset; | |
183 | var xPct = w == 0 ? 0 : (x / w); | |
184 | ||
185 | var delta = axis[1] - axis[0]; | |
186 | var increment = delta * percentage; | |
187 | var foo = [increment * xPct, increment * (1 - xPct)]; | |
188 | var dateWindow = [ axis[0] + foo[0], axis[1] - foo[1] ]; | |
189 | ||
190 | g.updateOptions({ | |
191 | dateWindow: dateWindow | |
192 | }); | |
178b1e0a | 193 | event.preventDefault(); |
8c5fe59e DV |
194 | } |
195 | }, | |
196 | strokeWidth: 1.5, | |
197 | gridLineColor: 'rgb(196, 196, 196)', | |
fc7d0ef1 DV |
198 | axes: { |
199 | y: { | |
200 | drawAxis: false, | |
201 | drawGrid: false | |
202 | } | |
203 | } | |
8c5fe59e DV |
204 | }); |
205 | window.onmouseup = finishDraw; | |
206 | </script> | |
207 | ||
208 | <p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from <a | |
209 | href="http://www.fatcow.com/free-icons">FatCow</a>.</p> | |
210 | </body> | |
211 | </html> |