4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>Dygraphs Drawing Demo
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
9 var start_date = new Date(
"2002/12/29").getTime();
10 var end_date = new Date().getTime();
12 for (var d = start_date; d < end_date; d +=
604800 *
1000) {
13 var millis = d +
2 *
3600 *
1000;
14 var date = new Date(millis);
15 var yyyy = date.getFullYear(),
18 data.push( [ new Date(Date.UTC(yyyy, mm, dd)),
50 ]);
24 background: url('drawing/tool-palette.png');
25 background-position:
0px
0px;
29 display: inline-block;
32 background: url('drawing/tool-palette.png');
33 background-position: -
32px
0px;
36 display: inline-block;
39 background: url('drawing/tool-palette.png');
40 background-position: -
64px
0px;
43 display: inline-block;
46 display: inline-block;
51 <h2>Time Series Drawing Demo
</h2>
53 <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>
55 <div id=
"draw_div" style=
"width: 800px; height: 400px;"></div>
57 <script type=
"text/javascript">
58 var isDrawing = false;
59 var lastDrawRow = null, lastDrawValue = null;
61 var valueRange = [
0,
100];
63 function setPoint(event, g, context) {
64 var pos = Dygraph.findPos(g.graphDiv);
65 var canvasx = Dygraph.pageX(event) - pos.x;
66 var canvasy = Dygraph.pageY(event) - pos.y;
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' ],
143 mousedown: function (event, g, context) {
144 if (tool == 'zoom') {
145 Dygraph.defaultInteractionModel.mousedown(event, g, context);
147 event.preventDefault(); // Firefox, Chrome, etc.
149 setPoint(event, g, context);
152 mousemove: function (event, g, context) {
153 if (tool == 'zoom') {
155 if (!isDrawing) return;
156 setPoint(event, g, context);
159 mouseup: function(event, g, context) {
160 if (tool == 'zoom') {
165 mouseout: function(event, g, context) {
166 if (tool == 'zoom') {
169 dblclick: function(event, g, context) {
170 Dygraph.defaultInteractionModel.dblclick(event, g, context);
172 mousewheel: function(event, g, context) {
173 var normal = event.detail ? event.detail * -
1 : event.wheelDelta /
40;
174 var percentage = normal /
50;
175 var axis = g.xAxisRange();
176 var xOffset = g.toDomCoords(axis[
0], null)[
0];
177 var x = event.offsetX - xOffset;
178 var w = g.toDomCoords(axis[
1], null)[
0] - xOffset;
179 var xPct = w ==
0 ?
0 : (x / w);
181 var delta = axis[
1] - axis[
0];
182 var increment = delta * percentage;
183 var foo = [increment * xPct, increment * (
1 - xPct)];
184 var dateWindow = [ axis[
0] + foo[
0], axis[
1] - foo[
1] ];
187 dateWindow: dateWindow
189 event.preventDefault();
193 gridLineColor: 'rgb(
196,
196,
196)',
201 window.onmouseup = finishDraw;
204 <p style='font-size:
10pt'
>Toolbar/cursor icons are CC-licensed from
<a
205 href=
"http://www.fatcow.com/free-icons">FatCow
</a>.
</p>