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     <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>
  13
  14     <script type="text/javascript">
  15     var start_date = new Date("2002/12/29").getTime();
  16     var end_date = new Date().getTime();
  17     data = [];
  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 ]);
  21     }
  22     </script>
  23     <style type="text/css">
  24     #tool_zoom {
  25       background: url('drawing/tool-palette.png');
  26       background-position-x: 0px;
  27       width: 32px;
  28       height: 33px;
  29       margin-left: 50px;
  30       display: inline-block;
  31     }
  32     #tool_pencil {
  33       background: url('drawing/tool-palette.png');
  34       background-position-x: -32px;
  35       width: 32px;
  36       height: 33px;
  37       display: inline-block;
  38     }
  39     #tool_eraser {
  40       background: url('drawing/tool-palette.png');
  41       background-position-x: -64px;
  42       width: 33px;
  43       height: 33px;
  44       display: inline-block;
  45     }
  46     #toolbar {
  47       display: inline-block;
  48     }
  49     </style>
  50 </head>
  51 <body>
  52   <h2>Time Series Drawing Demo</h2>
  53   <div id='toolbar'>
  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>
  55   </div>
  56   <div id="draw_div" style="width: 800px; height: 400px;"></div>
  57
  58   <script type="text/javascript">
  59     var isDrawing = false;
  60     var lastDrawRow = null, lastDrawValue = null;
  61     var tool = 'pencil';
  62     var valueRange = [0, 100];
  63
  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();
  70       var closest_row = -1;
  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) {
  77           smallest_diff = diff;
  78           closest_row = row;
  79         }
  80       }
  81
  82       if (closest_row != -1) {
  83         if (lastDrawRow === null) {
  84           lastDrawRow = closest_row;
  85           lastDrawValue = value;
  86         }
  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]));
  95             data[row][1] = val;
  96             if (val == null || isNaN(val)) console.log(val);
  97           } else if (tool == 'eraser') {
  98             data[row][1] = null;
  99           }
 100         }
 101         lastDrawRow = closest_row;
 102         lastDrawValue = value;
 103         g.updateOptions({ file: data });
 104         g.setSelection(closest_row);  // prevents the dot from being finnicky.
 105       }
 106     }
 107
 108     function finishDraw() {
 109       isDrawing = false;
 110       lastDrawRow = null;
 111       lastDrawValue = null;
 112     }
 113
 114     function change_tool(tool_div) {
 115       var ids = ['tool_pencil', 'tool_zoom', 'tool_eraser'];
 116       for (var i = 0; i < ids.length; i++) {
 117         document.getElementById(ids[i]).style.backgroundPositionY = 0;
 118       }
 119       tool_div.style.backgroundPositionY = '-32px';
 120       tool = tool_div.id.replace('tool_', '');
 121
 122       var dg_div = document.getElementById("draw_div");
 123       if (tool == 'pencil') {
 124         dg_div.style.cursor = 'url(drawing/cursor-pencil.png) 2 30, auto';
 125       } else if (tool == 'eraser') {
 126         dg_div.style.cursor = 'url(drawing/cursor-eraser.png) 10 30, auto';
 127       } else if (tool == 'zoom') {
 128         dg_div.style.cursor = 'crosshair';
 129       }
 130     }
 131     change_tool(document.getElementById("tool_pencil"));
 132
 133     g = new Dygraph(document.getElementById("draw_div"), data,
 134         {
 135           valueRange: valueRange,
 136           labels: [ 'Date', 'Value' ],
 137           interactionModel: {
 138             mousedown: function (event, g, context) {
 139               if (tool == 'zoom') {
 140                 Dygraph.defaultInteractionModel.mousedown(event, g, context);
 141               } else {
 142                 // prevents mouse drags from selecting page text.
 143                 if (event.preventDefault) {
 144                   event.preventDefault();  // Firefox, Chrome, etc.
 145                 } else {
 146                   event.returnValue = false;  // IE
 147                   event.cancelBubble = true;
 148                 }
 149                 isDrawing = true;
 150                 setPoint(event, g, context);
 151               }
 152             },
 153             mousemove: function (event, g, context) {
 154               if (tool == 'zoom') {
 155                 Dygraph.defaultInteractionModel.mousemove(event, g, context);
 156               } else {
 157                 if (!isDrawing) return;
 158                 setPoint(event, g, context);
 159               }
 160             },
 161             mouseup: function(event, g, context) {
 162               if (tool == 'zoom') {
 163                 Dygraph.defaultInteractionModel.mouseup(event, g, context);
 164               } else {
 165                 finishDraw();
 166               }
 167             },
 168             mouseout: function(event, g, context) {
 169               if (tool == 'zoom') {
 170                 Dygraph.defaultInteractionModel.mouseout(event, g, context);
 171               }
 172             },
 173             dblclick: function(event, g, context) {
 174               Dygraph.defaultInteractionModel.dblclick(event, g, context);
 175             },
 176             mousewheel: function(event, g, context) {
 177               var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
 178               var percentage = normal / 50;
 179               var axis = g.xAxisRange();
 180               var xOffset = g.toDomCoords(axis[0], null)[0];
 181               var x = event.offsetX - xOffset;
 182               var w = g.toDomCoords(axis[1], null)[0] - xOffset;
 183               var xPct = w == 0 ? 0 : (x / w);
 184
 185               var delta = axis[1] - axis[0];
 186               var increment = delta * percentage;
 187               var foo = [increment * xPct, increment * (1 - xPct)];
 188               var dateWindow = [ axis[0] + foo[0], axis[1] - foo[1] ];
 189
 190               g.updateOptions({
 191                 dateWindow: dateWindow
 192               });
 193               Dygraph.cancelEvent(event);
 194             }
 195           },
 196           strokeWidth: 1.5,
 197           gridLineColor: 'rgb(196, 196, 196)',
 198           drawYGrid: false,
 199           drawYAxis: false
 200         });
 201         window.onmouseup = finishDraw;
 202   </script>
 203
 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>
 206 </body>
 207 </html>