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