[dygraphs.git] / tests / interaction.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <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>
    <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!</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">
      Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; });
      Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; });
      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,
        '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
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>interaction model</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	<script type="text/javascript" src="data.js"></script>
	14	<script type="text/javascript" src="interaction.js"></script>
	15	</head>
	16	<body>
	17	<table border='1'>
	18	<tr><td>
	19	<b>Default interaction model</b>
	20	<div id="div_g" style="width:600px; height:300px;"></div>
	21	</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>
	22	</td></tr>
	23	<tr><td>
	24	<b>No interaction model</b>
	25	<div id="div_g2" style="width:600px; height:300px;"></div>
	26	</td><td>Click and drag all you like, it won't do anything!</td></tr>
	27	<tr><td>
	28	<b>Custom interaction model</b>
	29
	30	<input type="button" value="Restore position" onclick="restorePositioning(g3)">
	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/>
	35	Standard Zoom: shift-click-drag
	36	Standard Pan: click-drag<br/>
	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>
	48
	49	<script type="text/javascript">
	50	Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; });
	51	Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; });
	52	var g = new Dygraph(document.getElementById("div_g"),
	53	NoisyData, { errorBars : true });
	54	var g2 = new Dygraph(document.getElementById("div_g2"),
	55	NoisyData, { errorBars : true, interactionModel : {} });
	56	var g3 = new Dygraph(document.getElementById("div_g3"),
	57	NoisyData, { errorBars : true, interactionModel : {
	58	'mousedown' : downV3,
	59	'mousemove' : moveV3,
	60	'mouseup' : upV3,
	61	'click' : clickV3,
	62	'dblclick' : dblClickV3,
	63	'mousewheel' : scrollV3
	64	}});
	65	var g4 = new Dygraph(document.getElementById("div_g4"),
	66	NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
	67	'mousedown' : downV4,
	68	'mousemove' : moveV4,
	69	'mouseup' : upV4,
	70	'dblclick' : dblClickV4,
	71	},
	72	underlayCallback : captureCanvas
	73	});
	74	</script>
	75
	76	</body>
	77	</html>