4 name
: 'Time Series Drawing Demo',
5 title
: 'Time Series Drawing Demo',
6 setup
: function(parent
) {
9 "<div id='tool_zoom' onClick='change_tool(this)'></div>" +
10 "<div id='tool_pencil' onClick='change_tool(this)'></div>" +
11 "<div id='tool_eraser' onClick='change_tool(this)'></div>" +
13 "<div id='draw_div' style='width: 800px; height: 400px;'></div>" +
14 "<p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from " +
15 "<a href='http://www.fatcow.com/free-icons'>FatCow</a>.</p>";
18 var start_date
= new Date("2002/12/29").getTime();
19 var end_date
= new Date().getTime();
21 for (var d
= start_date
; d
< end_date
; d
+= 604800 * 1000) {
22 var millis
= d
+ 2 * 3600 * 1000;
23 data
.push( [ new Date(new Date(millis
).strftime("%Y/%m/%d")), 50 ]);
26 var isDrawing
= false;
27 var lastDrawRow
= null, lastDrawValue
= null;
29 var valueRange
= [0, 100];
31 function setPoint(event
, g
, context
) {
32 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(g
.graphDiv
);
33 var canvasy
= Dygraph
.pageY(event
) - Dygraph
.findPosY(g
.graphDiv
);
34 var xy
= g
.toDataCoords(canvasx
, canvasy
);
35 var x
= xy
[0], value
= xy
[1];
36 var rows
= g
.numRows();
38 var smallest_diff
= -1;
39 // TODO(danvk): binary search
40 for (var row
= 0; row
< rows
; row
++) {
41 var date
= g
.getValue(row
, 0); // millis
42 var diff
= Math
.abs(date
- x
);
43 if (smallest_diff
< 0 || diff
< smallest_diff
) {
49 if (closest_row
!= -1) {
50 if (lastDrawRow
=== null) {
51 lastDrawRow
= closest_row
;
52 lastDrawValue
= value
;
54 var coeff
= (value
- lastDrawValue
) / (closest_row
- lastDrawRow
);
55 if (closest_row
== lastDrawRow
) coeff
= 0.0;
56 var minRow
= Math
.min(lastDrawRow
, closest_row
);
57 var maxRow
= Math
.max(lastDrawRow
, closest_row
);
58 for (var row
= minRow
; row
<= maxRow
; row
++) {
59 if (tool
== 'pencil') {
60 var val
= lastDrawValue
+ coeff
* (row
- lastDrawRow
);
61 val
= Math
.max(valueRange
[0], Math
.min(val
, valueRange
[1]));
63 if (val
== null || isNaN(val
)) console
.log(val
);
64 } else if (tool
== 'eraser') {
68 lastDrawRow
= closest_row
;
69 lastDrawValue
= value
;
70 g
.updateOptions({ file
: data
});
71 g
.setSelection(closest_row
); // prevents the dot from being finnicky.
75 function finishDraw() {
81 window
.change_tool
= function(tool_div
) {
82 var ids
= ['tool_zoom', 'tool_pencil', 'tool_eraser'];
83 for (var i
= 0; i
< ids
.length
; i
++) {
84 var div
= document
.getElementById(ids
[i
]);
85 if (div
== tool_div
) {
86 div
.style
.backgroundPosition
= -(i
* 32) + 'px -32px';
88 div
.style
.backgroundPosition
= -(i
* 32) + 'px 0px';
91 tool
= tool_div
.id
.replace('tool_', '');
93 var dg_div
= document
.getElementById("draw_div");
94 if (tool
== 'pencil') {
95 dg_div
.style
.cursor
= 'url(drawing/cursor-pencil.png) 2 30, auto';
96 } else if (tool
== 'eraser') {
97 dg_div
.style
.cursor
= 'url(drawing/cursor-eraser.png) 10 30, auto';
98 } else if (tool
== 'zoom') {
99 dg_div
.style
.cursor
= 'crosshair';
102 change_tool(document
.getElementById("tool_pencil"));
104 g
= new Dygraph(document
.getElementById("draw_div"), data
,
106 valueRange
: valueRange
,
107 labels
: [ 'Date', 'Value' ],
109 mousedown
: function (event
, g
, context
) {
110 if (tool
== 'zoom') {
111 Dygraph
.defaultInteractionModel
.mousedown(event
, g
, context
);
113 // prevents mouse drags from selecting page text.
114 if (event
.preventDefault
) {
115 event
.preventDefault(); // Firefox, Chrome, etc.
117 event
.returnValue
= false; // IE
118 event
.cancelBubble
= true;
121 setPoint(event
, g
, context
);
124 mousemove
: function (event
, g
, context
) {
125 if (tool
== 'zoom') {
126 Dygraph
.defaultInteractionModel
.mousemove(event
, g
, context
);
128 if (!isDrawing
) return;
129 setPoint(event
, g
, context
);
132 mouseup
: function(event
, g
, context
) {
133 if (tool
== 'zoom') {
134 Dygraph
.defaultInteractionModel
.mouseup(event
, g
, context
);
139 mouseout
: function(event
, g
, context
) {
140 if (tool
== 'zoom') {
141 Dygraph
.defaultInteractionModel
.mouseout(event
, g
, context
);
144 dblclick
: function(event
, g
, context
) {
145 Dygraph
.defaultInteractionModel
.dblclick(event
, g
, context
);
147 mousewheel
: function(event
, g
, context
) {
148 var normal
= event
.detail
? event
.detail
* -1 : event
.wheelDelta
/ 40;
149 var percentage
= normal
/ 50;
150 var axis
= g
.xAxisRange();
151 var xOffset
= g
.toDomCoords(axis
[0], null)[0];
152 var x
= event
.offsetX
- xOffset
;
153 var w
= g
.toDomCoords(axis
[1], null)[0] - xOffset
;
154 var xPct
= w
== 0 ? 0 : (x
/ w
);
156 var delta
= axis
[1] - axis
[0];
157 var increment
= delta
* percentage
;
158 var foo
= [increment
* xPct
, increment
* (1 - xPct
)];
159 var dateWindow
= [ axis
[0] + foo
[0], axis
[1] - foo
[1] ];
162 dateWindow
: dateWindow
164 Dygraph
.cancelEvent(event
);
168 gridLineColor
: 'rgb(196, 196, 196)',
172 window
.onmouseup
= finishDraw
;