[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/9));
        } 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
	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	Standard Zoom: shift-click-drag
	34	Standard Pan: click-drag<br/>
	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>
	46
	47	<script type="text/javascript">
	48	function downV3(event, g, context) {
	49	context.initializeMouseDown(event, g, context);
	50	if (event.altKey \|\| event.shiftKey) {
	51	Dygraph.startZoom(event, g, context);
	52	} else {
	53	Dygraph.startPan(event, g, context);
	54	}
	55	}
	56
	57	function moveV3(event, g, context) {
	58	if (context.isPanning) {
	59	Dygraph.movePan(event, g, context);
	60	} else if (context.isZooming) {
	61	Dygraph.moveZoom(event, g, context);
	62	}
	63	}
	64
	65	function upV3(event, g, context) {
	66	if (context.isPanning) {
	67	Dygraph.endPan(event, g, context);
	68	} else if (context.isZooming) {
	69	Dygraph.endZoom(event, g, context);
	70	}
	71	}
	72
	73	function dblClickV3(event, g, context) {
	74	if (event.ctrlKey) {
	75	zoom(g, -(1/9));
	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) {
	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
	100	var yAxes = g.yAxisRanges();
	101	var newYAxes = [];
	102	for (var i = 0; i < yAxes.length; i++) {
	103	newYAxes[i] = adjustAxis(yAxes[i], percentage);
	104	}
	105
	106	g.updateOptions({
	107	dateWindow: adjustAxis(g.xAxisRange(), percentage),
	108	valueRange: newYAxes[0]
	109	});
	110	}
	111
	112	var v4Active = false;
	113	var v4Canvas = null;
	114
	115	function downV4(event, g, context) {
	116	context.initializeMouseDown(event, g, context);
	117	v4Active = true;
	118	moveV4(event, g, context); // in case the mouse went down on a data point.
	119	}
	120
	121	var processed = [];
	122
	123	function moveV4(event, g, context) {
	124	var RANGE = 7;
	125
	126	if (v4Active) {
	127	var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
	128	var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
	129
	130	var rows = g.numRows();
	131	// Row layout:
	132	// [date, [val1, stdev1], [val2, stdev2]]
	133	for (var row = 0; row < rows; row++) {
	134	var date = g.getValue(row, 0);
	135	var x = g.toDomCoords(date, null)[0];
	136	var diff = Math.abs(canvasx - x);
	137	if (diff < RANGE) {
	138	for (var col = 1; col < 3; col++) {
	139	// TODO(konigsberg): these will throw exceptions as data is removed.
	140	var vals = g.getValue(row, col);
	141	if (vals == null) { continue; }
	142	var val = vals[0];
	143	var y = g.toDomCoords(null, val)[1];
	144	var diff2 = Math.abs(canvasy - y);
	145	if (diff2 < RANGE) {
	146	var found = false;
	147	for (var i in processed) {
	148	var stored = processed[i];
	149	if(stored[0] == row && stored[1] == col) {
	150	found = true;
	151	break;
	152	}
	153	}
	154	if (!found) {
	155	processed.push([row, col]);
	156	drawV4(x, y);
	157	}
	158	return;
	159	}
	160	}
	161	// drawV4(false, canvasx, canvasy);
	162	}
	163	}
	164	// drawV4(false, canvasx, canvasy);
	165	}
	166	}
	167
	168	function upV4(event, g, context) {
	169	if (v4Active) {
	170	v4Active = false;
	171	}
	172	}
	173
	174	function dblClickV4(event, g, context) {
	175	unzoomGraph(g4);
	176	}
	177
	178	function drawV4(x, y) {
	179	var ctx = v4Canvas;
	180
	181	ctx.strokeStyle = "#000000";
	182	ctx.fillStyle = "#FFFF00";
	183	ctx.beginPath();
	184	ctx.arc(x,y,5,0,Math.PI*2,true);
	185	ctx.closePath();
	186	ctx.stroke();
	187	ctx.fill();
	188	}
	189
	190	function captureCanvas(canvas, area, g) {
	191	v4Canvas = canvas;
	192	}
	193
	194	var g = new Dygraph(document.getElementById("div_g"),
	195	NoisyData, { errorBars : true });
	196	var g2 = new Dygraph(document.getElementById("div_g2"),
	197	NoisyData, { errorBars : true, interactionModel : {} });
	198	var g3 = new Dygraph(document.getElementById("div_g3"),
	199	NoisyData, { errorBars : true, interactionModel : {
	200	'mousedown' : downV3,
	201	'mousemove' : moveV3,
	202	'mouseup' : upV3,
	203	'dblclick' : dblClickV3,
	204	'mousewheel' : scrollV3
	205	}});
	206	var g4 = new Dygraph(document.getElementById("div_g4"),
	207	NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
	208	'mousedown' : downV4,
	209	'mousemove' : moveV4,
	210	'mouseup' : upV4,
	211	'dblclick' : dblClickV4,
	212	},
	213	underlayCallback : captureCanvas
	214	});
	215
	216	function unzoomGraph(g) {
	217	g.updateOptions({
	218	dateWindow: null,
	219	valueRange: null
	220	});
	221	}
	222	</script>
	223
	224	</body>
	225	</html>