tests/drawing.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>Dygraphs Drawing Demo</title>
   6     <!--[if IE]>
   7     <script type="text/javascript" src="../excanvas.js"></script>
   8     <![endif]-->
   9     <!--
  10     For production (minified) code, use:
  11     <script type="text/javascript" src="dygraph-combined.js"></script>
  12     -->
  13     <script type="text/javascript" src="../dygraph-dev.js"></script>
  14
  15
  16     <script type="text/javascript">
  17     var start_date = new Date("2002/12/29").getTime();
  18     var end_date = new Date().getTime();
  19     data = [];
  20     for (var d = start_date; d < end_date; d += 604800 * 1000) {
  21       var millis = d + 2 * 3600 * 1000;
  22       data.push( [ new Date(new Date(millis).strftime("%Y/%m/%d")), 50 ]);
  23     }
  24     </script>
  25     <style type="text/css">
  26     #tool_zoom {
  27       background: url('drawing/tool-palette.png');
  28       background-position: 0px 0px;
  29       width: 32px;
  30       height: 33px;
  31       margin-left: 50px;
  32       display: inline-block;
  33     }
  34     #tool_pencil {
  35       background: url('drawing/tool-palette.png');
  36       background-position: -32px 0px;
  37       width: 32px;
  38       height: 33px;
  39       display: inline-block;
  40     }
  41     #tool_eraser {
  42       background: url('drawing/tool-palette.png');
  43       background-position: -64px 0px;
  44       width: 33px;
  45       height: 33px;
  46       display: inline-block;
  47     }
  48     #toolbar {
  49       display: inline-block;
  50     }
  51     </style>
  52 </head>
  53 <body>
  54   <h2>Time Series Drawing Demo</h2>
  55   <div id='toolbar'>
  56     <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>
  57   </div>
  58   <div id="draw_div" style="width: 800px; height: 400px;"></div>
  59
  60   <script type="text/javascript">
  61     var isDrawing = false;
  62     var lastDrawRow = null, lastDrawValue = null;
  63     var tool = 'pencil';
  64     var valueRange = [0, 100];
  65
  66     function setPoint(event, g, context) {
  67       var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
  68       var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
  69       var xy = g.toDataCoords(canvasx, canvasy);
  70       var x = xy[0], value = xy[1];
  71       var rows = g.numRows();
  72       var closest_row = -1;
  73       var smallest_diff = -1;
  74       // TODO(danvk): binary search
  75       for (var row = 0; row < rows; row++) {
  76         var date = g.getValue(row, 0);  // millis
  77         var diff = Math.abs(date - x);
  78         if (smallest_diff < 0 || diff < smallest_diff) {
  79           smallest_diff = diff;
  80           closest_row = row;
  81         }
  82       }
  83
  84       if (closest_row != -1) {
  85         if (lastDrawRow === null) {
  86           lastDrawRow = closest_row;
  87           lastDrawValue = value;
  88         }
  89         var coeff = (value - lastDrawValue) / (closest_row - lastDrawRow);
  90         if (closest_row == lastDrawRow) coeff = 0.0;
  91         var minRow = Math.min(lastDrawRow, closest_row);
  92         var maxRow = Math.max(lastDrawRow, closest_row);
  93         for (var row = minRow; row <= maxRow; row++) {
  94           if (tool == 'pencil') {
  95             var val = lastDrawValue + coeff * (row - lastDrawRow);
  96             val = Math.max(valueRange[0], Math.min(val, valueRange[1]));
  97             data[row][1] = val;
  98             if (val == null || isNaN(val)) console.log(val);
  99           } else if (tool == 'eraser') {
 100             data[row][1] = null;
 101           }
 102         }
 103         lastDrawRow = closest_row;
 104         lastDrawValue = value;
 105         g.updateOptions({ file: data });
 106         g.setSelection(closest_row);  // prevents the dot from being finnicky.
 107       }
 108     }
 109
 110     function finishDraw() {
 111       isDrawing = false;
 112       lastDrawRow = null;
 113       lastDrawValue = null;
 114     }
 115
 116     function change_tool(tool_div) {
 117       var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
 118       for (var i = 0; i < ids.length; i++) {
 119         var div = document.getElementById(ids[i]);
 120         if (div == tool_div) {
 121           div.style.backgroundPosition = -(i * 32) + 'px -32px';
 122         } else {
 123           div.style.backgroundPosition = -(i * 32) + 'px 0px';
 124         }
 125       }
 126       tool = tool_div.id.replace('tool_', '');
 127
 128       var dg_div = document.getElementById("draw_div");
 129       if (tool == 'pencil') {
 130         dg_div.style.cursor = 'url(drawing/cursor-pencil.png) 2 30, auto';
 131       } else if (tool == 'eraser') {
 132         dg_div.style.cursor = 'url(drawing/cursor-eraser.png) 10 30, auto';
 133       } else if (tool == 'zoom') {
 134         dg_div.style.cursor = 'crosshair';
 135       }
 136     }
 137     change_tool(document.getElementById("tool_pencil"));
 138
 139     g = new Dygraph(document.getElementById("draw_div"), data,
 140         {
 141           valueRange: valueRange,
 142           labels: [ 'Date', 'Value' ],
 143           interactionModel: {
 144             mousedown: function (event, g, context) {
 145               if (tool == 'zoom') {
 146                 Dygraph.defaultInteractionModel.mousedown(event, g, context);
 147               } else {
 148                 // prevents mouse drags from selecting page text.
 149                 if (event.preventDefault) {
 150                   event.preventDefault();  // Firefox, Chrome, etc.
 151                 } else {
 152                   event.returnValue = false;  // IE
 153                   event.cancelBubble = true;
 154                 }
 155                 isDrawing = true;
 156                 setPoint(event, g, context);
 157               }
 158             },
 159             mousemove: function (event, g, context) {
 160               if (tool == 'zoom') {
 161                 Dygraph.defaultInteractionModel.mousemove(event, g, context);
 162               } else {
 163                 if (!isDrawing) return;
 164                 setPoint(event, g, context);
 165               }
 166             },
 167             mouseup: function(event, g, context) {
 168               if (tool == 'zoom') {
 169                 Dygraph.defaultInteractionModel.mouseup(event, g, context);
 170               } else {
 171                 finishDraw();
 172               }
 173             },
 174             mouseout: function(event, g, context) {
 175               if (tool == 'zoom') {
 176                 Dygraph.defaultInteractionModel.mouseout(event, g, context);
 177               }
 178             },
 179             dblclick: function(event, g, context) {
 180               Dygraph.defaultInteractionModel.dblclick(event, g, context);
 181             },
 182             mousewheel: function(event, g, context) {
 183               var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
 184               var percentage = normal / 50;
 185               var axis = g.xAxisRange();
 186               var xOffset = g.toDomCoords(axis[0], null)[0];
 187               var x = event.offsetX - xOffset;
 188               var w = g.toDomCoords(axis[1], null)[0] - xOffset;
 189               var xPct = w == 0 ? 0 : (x / w);
 190
 191               var delta = axis[1] - axis[0];
 192               var increment = delta * percentage;
 193               var foo = [increment * xPct, increment * (1 - xPct)];
 194               var dateWindow = [ axis[0] + foo[0], axis[1] - foo[1] ];
 195
 196               g.updateOptions({
 197                 dateWindow: dateWindow
 198               });
 199               Dygraph.cancelEvent(event);
 200             }
 201           },
 202           strokeWidth: 1.5,
 203           gridLineColor: 'rgb(196, 196, 196)',
 204           drawYGrid: false,
 205           drawYAxis: false
 206         });
 207         window.onmouseup = finishDraw;
 208   </script>
 209
 210   <p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from <a
 211   href="http://www.fatcow.com/free-icons">FatCow</a>.</p>
 212 </body>
 213 </html>