[dygraphs.git] / tests / interaction.html

<!DOCTYPE html>
<html>
  <head>
    <title>interaction model</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dist/dygraph.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="interaction.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!
    <div id="g2_console"></div>
    </td></tr>
    <tr><td>
    <b>Custom interaction model</b>

    <input type="button" value="Restore position" onclick="restorePositioning(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">
      document.addEventListener("mousewheel", function() {
        lastClickedGraph = null;
      }, false);
      document.addEventListener("click", function() { lastClickedGraph = null; }, false);
      var g = new Dygraph(document.getElementById("div_g"),
           NoisyData, { errorBars : true });
      var s = document.getElementById("g2_console");
      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,
        'click' : clickV3,
        '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
      });
    </script>

  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
885c13e4 RK	2	<html>
	3	<head>
	4	<title>interaction model</title>
7e5ddc94 DV	5	<!--
	6	For production (minified) code, use:
	7	<script type="text/javascript" src="dygraph-combined.js"></script>
	8	-->
fbd6834a	9	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	10
885c13e4	11	<script type="text/javascript" src="data.js"></script>
9e9ca2eb	12	<script type="text/javascript" src="interaction.js"></script>
885c13e4 RK	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>
027e9e9b DV	24	</td><td>Click and drag all you like, it won't do anything!
	25	<div id="g2_console"></div>
	26	</td></tr>
885c13e4 RK	27	<tr><td>
	28	<b>Custom interaction model</b>
	29
b4012e63	30	<input type="button" value="Restore position" onclick="restorePositioning(g3)">
885c13e4 RK	31	<div id="div_g3" style="width:600px; height:300px;"></div>
	32	</td><td>
	33	Zoom in: double-click, scroll wheel<br/>
	34	Zoom out: ctrl-double-click, scroll wheel<br/>
1f237ed6 RK	35	Standard Zoom: shift-click-drag
1f237ed6 RK	36	Standard Pan: click-drag<br/>
885c13e4 RK	37	Restore zoom level: press button<br/>
	38	</td></tr>
	39	<tr><td>
	40	<b>Fun model!</b>
	41	<div id="div_g4" style="width:600px; height:300px;"></div>
	42	</td><td>
	43	Keep the mouse button pressed, and hover over all points
	44	to mark them.
	45	</td></tr>
	46
	47	</table>
1f237ed6	48
885c13e4	49	<script type="text/javascript">
2b66af4f DV	50	document.addEventListener("mousewheel", function() {
	51	lastClickedGraph = null;
	52	}, false);
	53	document.addEventListener("click", function() { lastClickedGraph = null; }, false);
885c13e4 RK	54	var g = new Dygraph(document.getElementById("div_g"),
885c13e4 RK	55	NoisyData, { errorBars : true });
027e9e9b	56	var s = document.getElementById("g2_console");
885c13e4	57	var g2 = new Dygraph(document.getElementById("div_g2"),
027e9e9b DV	58	NoisyData,
	59	{
	60	errorBars : true,
0290d079	61	interactionModel: {}
027e9e9b	62	});
885c13e4 RK	63	var g3 = new Dygraph(document.getElementById("div_g3"),
	64	NoisyData, { errorBars : true, interactionModel : {
	65	'mousedown' : downV3,
	66	'mousemove' : moveV3,
	67	'mouseup' : upV3,
9d10bca3	68	'click' : clickV3,
885c13e4 RK	69	'dblclick' : dblClickV3,
	70	'mousewheel' : scrollV3
	71	}});
	72	var g4 = new Dygraph(document.getElementById("div_g4"),
	73	NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
	74	'mousedown' : downV4,
	75	'mousemove' : moveV4,
	76	'mouseup' : upV4,
	77	'dblclick' : dblClickV4,
	78	},
	79	underlayCallback : captureCanvas
	80	});
885c13e4 RK	81	</script>
	82
	83	</body>
	84	</html>