Merge pull request #678 from danvk/dygraphs-css
[dygraphs.git] / tests / drawing.html
... / ...
CommitLineData
1<!DOCTYPE html>
2<html>
3 <head>
4 <link rel="stylesheet" href="../css/dygraph.css">
5 <title>Dygraphs Drawing Demo</title>
6 <!--
7 For production (minified) code, use:
8 <script type="text/javascript" src="dygraph-combined.js"></script>
9 -->
10 <script type="text/javascript" src="../dist/dygraph.js"></script>
11
12 <script>
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;
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 ]);
23 }
24 </script>
25
26 <style>
27 #tool_zoom {
28 background: url('drawing/tool-palette.png');
29 background-position: 0px 0px;
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');
37 background-position: -32px 0px;
38 width: 32px;
39 height: 33px;
40 display: inline-block;
41 }
42 #tool_eraser {
43 background: url('drawing/tool-palette.png');
44 background-position: -64px 0px;
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) {
68 var pos = Dygraph.findPos(g.graphDiv);
69 var canvasx = Dygraph.pageX(event) - pos.x;
70 var canvasy = Dygraph.pageY(event) - pos.y;
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) {
119 var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
120 for (var i = 0; i < ids.length; i++) {
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 }
127 }
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' ],
145 labelsUTC: true,
146 interactionModel: {
147 mousedown: function (event, g, context) {
148 if (tool == 'zoom') {
149 Dygraph.defaultInteractionModel.mousedown(event, g, context);
150 } else {
151 event.preventDefault(); // Firefox, Chrome, etc.
152 isDrawing = true;
153 setPoint(event, g, context);
154 }
155 },
156 mousemove: function (event, g, context) {
157 if (tool == 'zoom') {
158 } else {
159 if (!isDrawing) return;
160 setPoint(event, g, context);
161 }
162 },
163 mouseup: function(event, g, context) {
164 if (tool == 'zoom') {
165 } else {
166 finishDraw();
167 }
168 },
169 mouseout: function(event, g, context) {
170 if (tool == 'zoom') {
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 });
193 event.preventDefault();
194 }
195 },
196 strokeWidth: 1.5,
197 gridLineColor: 'rgb(196, 196, 196)',
198 axes: {
199 y: {
200 drawAxis: false,
201 drawGrid: false
202 }
203 }
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>