4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Dygraphs Drawing Demo
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
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>
14 <script type=
"text/javascript">
15 var start_date = new Date(
"2002/12/29").getTime();
16 var end_date = new Date().getTime();
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 ]);
23 <style type=
"text/css">
25 background: url('drawing/tool-palette.png');
26 background-position:
0px
0px;
30 display: inline-block;
33 background: url('drawing/tool-palette.png');
34 background-position: -
32px
0px;
37 display: inline-block;
40 background: url('drawing/tool-palette.png');
41 background-position: -
64px
0px;
44 display: inline-block;
47 display: inline-block;
52 <h2>Time Series Drawing Demo
</h2>
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>
56 <div id=
"draw_div" style=
"width: 800px; height: 400px;"></div>
58 <script type=
"text/javascript">
59 var isDrawing = false;
60 var lastDrawRow = null, lastDrawValue = null;
62 var valueRange = [
0,
100];
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();
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) {
82 if (closest_row != -
1) {
83 if (lastDrawRow === null) {
84 lastDrawRow = closest_row;
85 lastDrawValue = value;
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]));
96 if (val == null || isNaN(val)) console.log(val);
97 } else if (tool == 'eraser') {
101 lastDrawRow = closest_row;
102 lastDrawValue = value;
103 g.updateOptions({ file: data });
104 g.setSelection(closest_row); // prevents the dot from being finnicky.
108 function finishDraw() {
111 lastDrawValue = null;
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';
121 div.style.backgroundPosition = -(i *
32) + 'px
0px';
124 tool = tool_div.id.replace('tool_', '');
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';
135 change_tool(document.getElementById(
"tool_pencil"));
137 g = new Dygraph(document.getElementById(
"draw_div"), data,
139 valueRange: valueRange,
140 labels: [ 'Date', 'Value' ],
142 mousedown: function (event, g, context) {
143 if (tool == 'zoom') {
144 Dygraph.defaultInteractionModel.mousedown(event, g, context);
146 // prevents mouse drags from selecting page text.
147 if (event.preventDefault) {
148 event.preventDefault(); // Firefox, Chrome, etc.
150 event.returnValue = false; // IE
151 event.cancelBubble = true;
154 setPoint(event, g, context);
157 mousemove: function (event, g, context) {
158 if (tool == 'zoom') {
159 Dygraph.defaultInteractionModel.mousemove(event, g, context);
161 if (!isDrawing) return;
162 setPoint(event, g, context);
165 mouseup: function(event, g, context) {
166 if (tool == 'zoom') {
167 Dygraph.defaultInteractionModel.mouseup(event, g, context);
172 mouseout: function(event, g, context) {
173 if (tool == 'zoom') {
174 Dygraph.defaultInteractionModel.mouseout(event, g, context);
177 dblclick: function(event, g, context) {
178 Dygraph.defaultInteractionModel.dblclick(event, g, context);
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);
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] ];
195 dateWindow: dateWindow
197 Dygraph.cancelEvent(event);
201 gridLineColor: 'rgb(
196,
196,
196)',
205 window.onmouseup = finishDraw;
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>