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