tests/interaction.html

   1
   2 <html>
   3   <head>
   4     <title>interaction model</title>
   5     <!--[if IE]>
   6     <script type="text/javascript" src="../excanvas.js"></script>
   7     <![endif]-->
   8     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   9     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  10     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  11     <script type="text/javascript" src="../dygraph.js"></script>
  12     <script type="text/javascript" src="data.js"></script>
  13   </head>
  14   <body>
  15     <table border='1'>
  16     <tr><td>
  17     <b>Default interaction model</b>
  18     <div id="div_g" style="width:600px; height:300px;"></div>
  19     </td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>
  20     </td></tr>
  21     <tr><td>
  22     <b>No interaction model</b>
  23     <div id="div_g2" style="width:600px; height:300px;"></div>
  24     </td><td>Click and drag all you like, it won't do anything!</td></tr>
  25     <tr><td>
  26     <b>Custom interaction model</b>
  27
  28     <input type="button" value="Unzoom" onclick="unzoomGraph(g3)">
  29     <div id="div_g3" style="width:600px; height:300px;"></div>
  30     </td><td>
  31     Zoom in: double-click, scroll wheel<br/>
  32     Zoom out: ctrl-double-click, scroll wheel<br/>
  33     Pan: click-drag<br/>
  34     Restore zoom level: press button<br/>
  35     </td></tr>
  36     <tr><td>
  37     <b>Fun model!</b>
  38     <div id="div_g4" style="width:600px; height:300px;"></div>
  39     </td><td>
  40     Keep the mouse button pressed, and hover over all points
  41     to mark them.
  42     </td></tr>
  43
  44     </table>
  45
  46     <script type="text/javascript">
  47       function downV3(event, g, context) {
  48         context.initializeMouseDown(event, g, context);
  49         Dygraph.startPan(event, g, context);
  50       }
  51
  52       function moveV3(event, g, context) {
  53         if (context.isPanning) {
  54           Dygraph.movePan(event, g, context);
  55         }
  56       }
  57
  58       function upV3(event, g, context) {
  59         if (context.isPanning) {
  60           Dygraph.endPan(event, g, context);
  61         }
  62       }
  63
  64       function dblClickV3(event, g, context) {
  65         if (event.ctrlKey) {
  66           zoom(g, -(1/9));
  67         } else {
  68           zoom(g, +.1);
  69         }
  70       }
  71
  72       function scrollV3(event, g, context) {
  73         var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
  74         // For me the normalized value shows 0.075 for one click. If I took
  75         // that verbatim, it would be a 7.5%. I think I'm gonna take 1/10 of that.
  76         // (double for left and right side)
  77         var percentage = normal / 100;
  78
  79         zoom(g, percentage);
  80         Dygraph.cancelEvent(event);
  81       }
  82
  83       function zoom(g, percentage) {
  84          // Adjusts [x, y] toward each other by percentage%
  85          function adjustAxis(axis, percentage) {
  86            var delta = axis[1] - axis[0];
  87            var increment = delta * percentage;
  88            return [ axis[0] + increment, axis[1] - increment ];
  89          }
  90
  91          var yAxes = g.yAxisRanges();
  92          var newYAxes = [];
  93          for (var i = 0; i < yAxes.length; i++) {
  94            newYAxes[i] = adjustAxis(yAxes[i], percentage);
  95          }
  96
  97          g.updateOptions({
  98            dateWindow: adjustAxis(g.xAxisRange(), percentage),
  99            valueRange: newYAxes[0]
 100            });
 101       }
 102
 103       var v4Active = false;
 104       var v4Canvas = null;
 105
 106       function downV4(event, g, context) {
 107         context.initializeMouseDown(event, g, context);
 108         v4Active = true;
 109         moveV4(event, g, context); // in case the mouse went down on a data point.
 110       }
 111
 112       var processed = [];
 113
 114       function moveV4(event, g, context) {
 115         var RANGE = 7;
 116
 117         if (v4Active) {
 118           var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
 119           var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
 120
 121           var rows = g.numRows();
 122           // Row layout:
 123           // [date, [val1, stdev1], [val2, stdev2]]
 124           for (var row = 0; row < rows; row++) {
 125             var date = g.getValue(row, 0);
 126             var x = g.toDomCoords(date, null)[0];
 127             var diff = Math.abs(canvasx - x);
 128             if (diff < RANGE) {
 129               for (var col = 1; col < 3; col++) {
 130                 // TODO(konigsberg): these will throw exceptions as data is removed.
 131                 var vals =  g.getValue(row, col);
 132                 if (vals == null) { continue; }
 133                 var val = vals[0];
 134                 var y = g.toDomCoords(null, val)[1];
 135                 var diff2 = Math.abs(canvasy - y);
 136                 if (diff2 < RANGE) {
 137                   var found = false;
 138                   for (var i in processed) {
 139                     var stored = processed[i];
 140                     if(stored[0] == row && stored[1] == col) {
 141                       found = true;
 142                       break;
 143                     }
 144                   }
 145                   if (!found) {
 146                     processed.push([row, col]);
 147                     drawV4(x, y);
 148                   }
 149                   return;
 150                 }
 151               }
 152               // drawV4(false, canvasx, canvasy);
 153             }
 154           }
 155           // drawV4(false, canvasx, canvasy);
 156         }
 157       }
 158
 159       function upV4(event, g, context) {
 160         if (v4Active) {
 161           v4Active = false;
 162         }
 163       }
 164
 165       function dblClickV4(event, g, context) {
 166         unzoomGraph(g4);
 167       }
 168
 169       function drawV4(x, y) {
 170         var ctx = v4Canvas;
 171
 172         ctx.strokeStyle = "#000000";
 173         ctx.fillStyle = "#FFFF00";
 174         ctx.beginPath();
 175         ctx.arc(x,y,5,0,Math.PI*2,true);
 176         ctx.closePath();
 177         ctx.stroke();
 178         ctx.fill();
 179       }
 180
 181       function captureCanvas(canvas, area, g) {
 182         v4Canvas = canvas;
 183       }
 184
 185       var g = new Dygraph(document.getElementById("div_g"),
 186            NoisyData, { errorBars : true });
 187       var g2 = new Dygraph(document.getElementById("div_g2"),
 188            NoisyData, { errorBars : true, interactionModel : {} });
 189       var g3 = new Dygraph(document.getElementById("div_g3"),
 190            NoisyData, { errorBars : true, interactionModel : {
 191         'mousedown' : downV3,
 192         'mousemove' : moveV3,
 193         'mouseup' : upV3,
 194         'dblclick' : dblClickV3,
 195         'mousewheel' : scrollV3
 196       }});
 197       var g4 = new Dygraph(document.getElementById("div_g4"),
 198            NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
 199             'mousedown' : downV4,
 200             'mousemove' : moveV4,
 201             'mouseup' : upV4,
 202             'dblclick' : dblClickV4,
 203            },
 204            underlayCallback : captureCanvas
 205       });
 206
 207       function unzoomGraph(g) {
 208         g.updateOptions({
 209           dateWindow: null,
 210           valueRange: null
 211         });
 212       }
 213     </script>
 214
 215   </body>
 216 </html>