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>
10 For production (minified) code, use:
11 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
13 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
16 var start_date = new Date(
"2002/12/29").getTime();
17 var end_date = new Date().getTime();
19 for (var d = start_date; d < end_date; d +=
604800 *
1000) {
20 var millis = d +
2 *
3600 *
1000;
21 var date = new Date(millis);
22 var yyyy = date.getFullYear(),
25 data.push( [ new Date(Date.UTC(yyyy, mm, dd)),
50 ]);
31 background: url('drawing/tool-palette.png');
32 background-position:
0px
0px;
36 display: inline-block;
39 background: url('drawing/tool-palette.png');
40 background-position: -
32px
0px;
43 display: inline-block;
46 background: url('drawing/tool-palette.png');
47 background-position: -
64px
0px;
50 display: inline-block;
53 display: inline-block;
58 <h2>Time Series Drawing Demo
</h2>
60 <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>
62 <div id=
"draw_div" style=
"width: 800px; height: 400px;"></div>
64 <script type=
"text/javascript">
65 var isDrawing = false;
66 var lastDrawRow = null, lastDrawValue = null;
68 var valueRange = [
0,
100];
70 function setPoint(event, g, context) {
71 var pos = Dygraph.findPos(g.graphDiv);
72 var canvasx = Dygraph.pageX(event) - pos.x;
73 var canvasy = Dygraph.pageY(event) - pos.y;
74 var xy = g.toDataCoords(canvasx, canvasy);
75 var x = xy[
0], value = xy[
1];
76 var rows = g.numRows();
78 var smallest_diff = -
1;
79 // TODO(danvk): binary search
80 for (var row =
0; row < rows; row++) {
81 var date = g.getValue(row,
0); // millis
82 var diff = Math.abs(date - x);
83 if (smallest_diff <
0 || diff < smallest_diff) {
89 if (closest_row != -
1) {
90 if (lastDrawRow === null) {
91 lastDrawRow = closest_row;
92 lastDrawValue = value;
94 var coeff = (value - lastDrawValue) / (closest_row - lastDrawRow);
95 if (closest_row == lastDrawRow) coeff =
0.0;
96 var minRow = Math.min(lastDrawRow, closest_row);
97 var maxRow = Math.max(lastDrawRow, closest_row);
98 for (var row = minRow; row <= maxRow; row++) {
99 if (tool == 'pencil') {
100 var val = lastDrawValue + coeff * (row - lastDrawRow);
101 val = Math.max(valueRange[
0], Math.min(val, valueRange[
1]));
103 if (val == null || isNaN(val)) console.log(val);
104 } else if (tool == 'eraser') {
108 lastDrawRow = closest_row;
109 lastDrawValue = value;
110 g.updateOptions({ file: data });
111 g.setSelection(closest_row); // prevents the dot from being finnicky.
115 function finishDraw() {
118 lastDrawValue = null;
121 function change_tool(tool_div) {
122 var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
123 for (var i =
0; i < ids.length; i++) {
124 var div = document.getElementById(ids[i]);
125 if (div == tool_div) {
126 div.style.backgroundPosition = -(i *
32) + 'px -
32px';
128 div.style.backgroundPosition = -(i *
32) + 'px
0px';
131 tool = tool_div.id.replace('tool_', '');
133 var dg_div = document.getElementById(
"draw_div");
134 if (tool == 'pencil') {
135 dg_div.style.cursor = 'url(drawing/cursor-pencil.png)
2 30, auto';
136 } else if (tool == 'eraser') {
137 dg_div.style.cursor = 'url(drawing/cursor-eraser.png)
10 30, auto';
138 } else if (tool == 'zoom') {
139 dg_div.style.cursor = 'crosshair';
142 change_tool(document.getElementById(
"tool_pencil"));
144 g = new Dygraph(document.getElementById(
"draw_div"), data,
146 valueRange: valueRange,
147 labels: [ 'Date', 'Value' ],
150 mousedown: function (event, g, context) {
151 if (tool == 'zoom') {
152 Dygraph.defaultInteractionModel.mousedown(event, g, context);
154 // prevents mouse drags from selecting page text.
155 if (event.preventDefault) {
156 event.preventDefault(); // Firefox, Chrome, etc.
158 event.returnValue = false; // IE
159 event.cancelBubble = true;
162 setPoint(event, g, context);
165 mousemove: function (event, g, context) {
166 if (tool == 'zoom') {
168 if (!isDrawing) return;
169 setPoint(event, g, context);
172 mouseup: function(event, g, context) {
173 if (tool == 'zoom') {
178 mouseout: function(event, g, context) {
179 if (tool == 'zoom') {
182 dblclick: function(event, g, context) {
183 Dygraph.defaultInteractionModel.dblclick(event, g, context);
185 mousewheel: function(event, g, context) {
186 var normal = event.detail ? event.detail * -
1 : event.wheelDelta /
40;
187 var percentage = normal /
50;
188 var axis = g.xAxisRange();
189 var xOffset = g.toDomCoords(axis[
0], null)[
0];
190 var x = event.offsetX - xOffset;
191 var w = g.toDomCoords(axis[
1], null)[
0] - xOffset;
192 var xPct = w ==
0 ?
0 : (x / w);
194 var delta = axis[
1] - axis[
0];
195 var increment = delta * percentage;
196 var foo = [increment * xPct, increment * (
1 - xPct)];
197 var dateWindow = [ axis[
0] + foo[
0], axis[
1] - foo[
1] ];
200 dateWindow: dateWindow
202 Dygraph.cancelEvent(event);
206 gridLineColor: 'rgb(
196,
196,
196)',
214 window.onmouseup = finishDraw;
217 <p style='font-size:
10pt'
>Toolbar/cursor icons are CC-licensed from
<a
218 href=
"http://www.fatcow.com/free-icons">FatCow
</a>.
</p>