[dygraphs.git] / tests / interaction.html


<html>
  <head>
    <title>interaction model</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../dygraph.js"></script>
    <script type="text/javascript" src="data.js"></script>
  </head>
  <body>
    <table border='1'>
    <tr><td>
    <b>Default interaction model</b>
    <div id="div_g" style="width:600px; height:300px;"></div>
    </td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>
    </td></tr>
    <tr><td>
    <b>No interaction model</b>
    <div id="div_g2" style="width:600px; height:300px;"></div>
    </td><td>Click and drag all you like, it won't do anything!</td></tr>
    <tr><td>
    <b>Custom interaction model</b>

    <input type="button" value="Unzoom" onclick="unzoomGraph(g3)">
    <div id="div_g3" style="width:600px; height:300px;"></div>
    </td><td>
    Zoom in: double-click, scroll wheel<br/>
    Zoom out: ctrl-double-click, scroll wheel<br/>
    Standard Zoom: shift-click-drag
    Standard Pan: click-drag<br/>
    Restore zoom level: press button<br/>
    </td></tr>
    <tr><td>
    <b>Fun model!</b>
    <div id="div_g4" style="width:600px; height:300px;"></div>
    </td><td>
    Keep the mouse button pressed, and hover over all points
    to mark them.   
    </td></tr>

    </table>
        
    <script type="text/javascript">
      function downV3(event, g, context) {
        context.initializeMouseDown(event, g, context);
        if (event.altKey || event.shiftKey) {
          Dygraph.startZoom(event, g, context);
        } else {
          Dygraph.startPan(event, g, context);
        }
      }

      function moveV3(event, g, context) {
        if (context.isPanning) {
          Dygraph.movePan(event, g, context);
        } else if (context.isZooming) {
          Dygraph.moveZoom(event, g, context);
        }
      }

      function upV3(event, g, context) {
        if (context.isPanning) {
          Dygraph.endPan(event, g, context);
        } else if (context.isZooming) {
          Dygraph.endZoom(event, g, context);
        }
      }

      function dblClickV3(event, g, context) {
        if (event.ctrlKey) {
          zoom(g, -(1/8));
        } else {
          zoom(g, +.1);
        }
      }

      function scrollV3(event, g, context) {
        var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
        // For me the normalized value shows 0.075 for one click. If I took
        // that verbatim, it would be a 7.5%. I think I'm gonna take 1/10 of that.
        // (double for left and right side)
        var percentage = normal / 100;

        zoom(g, percentage);
        Dygraph.cancelEvent(event);
      }

      function zoom(g, percentage) {
        // Adjusts [x, y] toward each other by percentage%
        function adjustAxis(axis, percentage) {
          var delta = axis[1] - axis[0];
          var increment = delta * percentage;
          return [ axis[0] + increment, axis[1] - increment ];
        }
        var yAxes = g.yAxisRanges();
        var newYAxes = [];
        for (var i = 0; i < yAxes.length; i++) {
          newYAxes[i] = adjustAxis(yAxes[i], percentage);
        }

        g.updateOptions({
          dateWindow: adjustAxis(g.xAxisRange(), percentage),
          valueRange: newYAxes[0]
          });
      }

      var v4Active = false;
      var v4Canvas = null;

      function downV4(event, g, context) {
        context.initializeMouseDown(event, g, context);
        v4Active = true;
        moveV4(event, g, context); // in case the mouse went down on a data point.
      }

      var processed = [];

      function moveV4(event, g, context) {
        var RANGE = 7;

        if (v4Active) {
          var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
          var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);

          var rows = g.numRows();
          // Row layout:
          // [date, [val1, stdev1], [val2, stdev2]]
          for (var row = 0; row < rows; row++) {
            var date = g.getValue(row, 0);
            var x = g.toDomCoords(date, null)[0];
            var diff = Math.abs(canvasx - x);
            if (diff < RANGE) {
              for (var col = 1; col < 3; col++) {
                // TODO(konigsberg): these will throw exceptions as data is removed.
                var vals =  g.getValue(row, col);
                if (vals == null) { continue; }
                var val = vals[0];
                var y = g.toDomCoords(null, val)[1];
                var diff2 = Math.abs(canvasy - y);
                if (diff2 < RANGE) {
                  var found = false;
                  for (var i in processed) {
                    var stored = processed[i];
                    if(stored[0] == row && stored[1] == col) {
                      found = true;
                      break;
                    }
                  }
                  if (!found) {
                    processed.push([row, col]);
                    drawV4(x, y);
                  }
                  return;
                }
              }
              // drawV4(false, canvasx, canvasy);
            }
          }
          // drawV4(false, canvasx, canvasy);
        }
      }

      function upV4(event, g, context) {
        if (v4Active) {
          v4Active = false;
        }
      }

      function dblClickV4(event, g, context) {
        unzoomGraph(g4);
      }

      function drawV4(x, y) {
        var ctx = v4Canvas;

        ctx.strokeStyle = "#000000";
        ctx.fillStyle = "#FFFF00";
        ctx.beginPath();
        ctx.arc(x,y,5,0,Math.PI*2,true);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
      }

      function captureCanvas(canvas, area, g) {
        v4Canvas = canvas;
      }

      var g = new Dygraph(document.getElementById("div_g"),
           NoisyData, { errorBars : true });
      var g2 = new Dygraph(document.getElementById("div_g2"),
           NoisyData, { errorBars : true, interactionModel : {} });
      var g3 = new Dygraph(document.getElementById("div_g3"),
           NoisyData, { errorBars : true, interactionModel : {
        'mousedown' : downV3,
        'mousemove' : moveV3,
        'mouseup' : upV3,
        'dblclick' : dblClickV3,
        'mousewheel' : scrollV3
      }});
      var g4 = new Dygraph(document.getElementById("div_g4"),
           NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
            'mousedown' : downV4,
            'mousemove' : moveV4,
            'mouseup' : upV4,
            'dblclick' : dblClickV4,
           },
           underlayCallback : captureCanvas
      });

      function unzoomGraph(g) {
        g.updateOptions({
          dateWindow: null,
          valueRange: null
        });
      }
    </script>

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