Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / drawing.html
CommitLineData
8c5fe59e
DV
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]-->
7e5ddc94
DV
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
8c5fe59e
DV
15
16 <script type="text/javascript">
17 var start_date = new Date("2002/12/29").getTime();
18 var end_date = new Date().getTime();
19 data = [];
20 for (var d = start_date; d < end_date; d += 604800 * 1000) {
21 var millis = d + 2 * 3600 * 1000;
22 data.push( [ new Date(new Date(millis).strftime("%Y/%m/%d")), 50 ]);
23 }
24 </script>
25 <style type="text/css">
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) {
67 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
68 var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
69 var xy = g.toDataCoords(canvasx, canvasy);
70 var x = xy[0], value = xy[1];
71 var rows = g.numRows();
72 var closest_row = -1;
73 var smallest_diff = -1;
74 // TODO(danvk): binary search
75 for (var row = 0; row < rows; row++) {
76 var date = g.getValue(row, 0); // millis
77 var diff = Math.abs(date - x);
78 if (smallest_diff < 0 || diff < smallest_diff) {
79 smallest_diff = diff;
80 closest_row = row;
81 }
82 }
83
84 if (closest_row != -1) {
85 if (lastDrawRow === null) {
86 lastDrawRow = closest_row;
87 lastDrawValue = value;
88 }
89 var coeff = (value - lastDrawValue) / (closest_row - lastDrawRow);
90 if (closest_row == lastDrawRow) coeff = 0.0;
91 var minRow = Math.min(lastDrawRow, closest_row);
92 var maxRow = Math.max(lastDrawRow, closest_row);
93 for (var row = minRow; row <= maxRow; row++) {
94 if (tool == 'pencil') {
95 var val = lastDrawValue + coeff * (row - lastDrawRow);
96 val = Math.max(valueRange[0], Math.min(val, valueRange[1]));
97 data[row][1] = val;
98 if (val == null || isNaN(val)) console.log(val);
99 } else if (tool == 'eraser') {
100 data[row][1] = null;
101 }
102 }
103 lastDrawRow = closest_row;
104 lastDrawValue = value;
105 g.updateOptions({ file: data });
106 g.setSelection(closest_row); // prevents the dot from being finnicky.
107 }
108 }
109
110 function finishDraw() {
111 isDrawing = false;
112 lastDrawRow = null;
113 lastDrawValue = null;
114 }
115
116 function change_tool(tool_div) {
86cf5a64 117 var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
8c5fe59e 118 for (var i = 0; i < ids.length; i++) {
86cf5a64
DV
119 var div = document.getElementById(ids[i]);
120 if (div == tool_div) {
121 div.style.backgroundPosition = -(i * 32) + 'px -32px';
122 } else {
123 div.style.backgroundPosition = -(i * 32) + 'px 0px';
124 }
8c5fe59e 125 }
8c5fe59e
DV
126 tool = tool_div.id.replace('tool_', '');
127
128 var dg_div = document.getElementById("draw_div");
129 if (tool == 'pencil') {
130 dg_div.style.cursor = 'url(drawing/cursor-pencil.png) 2 30, auto';
131 } else if (tool == 'eraser') {
132 dg_div.style.cursor = 'url(drawing/cursor-eraser.png) 10 30, auto';
133 } else if (tool == 'zoom') {
134 dg_div.style.cursor = 'crosshair';
135 }
136 }
137 change_tool(document.getElementById("tool_pencil"));
138
139 g = new Dygraph(document.getElementById("draw_div"), data,
140 {
141 valueRange: valueRange,
142 labels: [ 'Date', 'Value' ],
143 interactionModel: {
144 mousedown: function (event, g, context) {
145 if (tool == 'zoom') {
146 Dygraph.defaultInteractionModel.mousedown(event, g, context);
147 } else {
148 // prevents mouse drags from selecting page text.
149 if (event.preventDefault) {
150 event.preventDefault(); // Firefox, Chrome, etc.
151 } else {
152 event.returnValue = false; // IE
153 event.cancelBubble = true;
154 }
155 isDrawing = true;
156 setPoint(event, g, context);
157 }
158 },
159 mousemove: function (event, g, context) {
160 if (tool == 'zoom') {
161 Dygraph.defaultInteractionModel.mousemove(event, g, context);
162 } else {
163 if (!isDrawing) return;
164 setPoint(event, g, context);
165 }
166 },
167 mouseup: function(event, g, context) {
168 if (tool == 'zoom') {
169 Dygraph.defaultInteractionModel.mouseup(event, g, context);
170 } else {
171 finishDraw();
172 }
173 },
174 mouseout: function(event, g, context) {
175 if (tool == 'zoom') {
176 Dygraph.defaultInteractionModel.mouseout(event, g, context);
177 }
178 },
179 dblclick: function(event, g, context) {
180 Dygraph.defaultInteractionModel.dblclick(event, g, context);
181 },
182 mousewheel: function(event, g, context) {
183 var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
184 var percentage = normal / 50;
185 var axis = g.xAxisRange();
186 var xOffset = g.toDomCoords(axis[0], null)[0];
187 var x = event.offsetX - xOffset;
188 var w = g.toDomCoords(axis[1], null)[0] - xOffset;
189 var xPct = w == 0 ? 0 : (x / w);
190
191 var delta = axis[1] - axis[0];
192 var increment = delta * percentage;
193 var foo = [increment * xPct, increment * (1 - xPct)];
194 var dateWindow = [ axis[0] + foo[0], axis[1] - foo[1] ];
195
196 g.updateOptions({
197 dateWindow: dateWindow
198 });
199 Dygraph.cancelEvent(event);
200 }
201 },
202 strokeWidth: 1.5,
203 gridLineColor: 'rgb(196, 196, 196)',
204 drawYGrid: false,
205 drawYAxis: false
206 });
207 window.onmouseup = finishDraw;
208 </script>
209
210 <p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from <a
211 href="http://www.fatcow.com/free-icons">FatCow</a>.</p>
212</body>
213</html>