[dygraphs.git] / tests / callback.html

<html>
  <head>
    <title>callbacks</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>
    <style type="text/css">
      #div_g {
        position: absolute;
        left: 200px;
        top: 100px;
      }
      #status {
        position: absolute;
        top: 400px;
      }
    </style>
  </head>
  <body>
    <p>Hover, click and zoom to test the callbacks:</p>
    <div id="div_g" style="width:600px; height:300px;"></div>

    <input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
    <input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
    <div id="status" style="width:100%; height:200px;"></div>

    <script type="text/javascript">
      s = document.getElementById("status");
      g = null;
      pts_info = function(e, x, pts) {
        var str = "(" + x + ") ";
        for (var i = 0; i < pts.length; i++) {
          var p = pts[i];
          if (i) str += ", ";
          str += p.name + ": " + p.yval;
        }

        var x = e.offsetX;
        var y = e.offsetY;
        var dataXY = g.toDataCoords(x, y);
        str += ", (" + x + ", " + y + ")";
        str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";

        return str;
      };

      g = new Dygraph(
            document.getElementById("div_g"),
            NoisyData, {
              rollPeriod: 7,
              showRoller: true,
              errorBars: true,

              highlightCallback: function(e, x, pts) {
                if (document.getElementById('highlight').checked) {
                  s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts) + "<br/>";
                }
              },

              clickCallback: function(e, x, pts) {
                s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
              },

              zoomCallback: function(minX, maxX) {
                s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + "]<br/>";
              },

              drawCallback: function(g) {
                s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
              }
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
b258a3da DV	1	<html>
	2	<head>
	3	<title>callbacks</title>
	4	<!--[if IE]>
	5	<script type="text/javascript" src="excanvas.js"></script>
	6	<![endif]-->
d37dca40 DV	7	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
d37dca40 DV	8	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
b258a3da DV	9	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	10	<script type="text/javascript" src="../dygraph.js"></script>
	11	<script type="text/javascript" src="data.js"></script>
3230c662 DV	12	<style type="text/css">
	13	#div_g {
	14	position: absolute;
	15	left: 200px;
	16	top: 100px;
	17	}
	18	#status {
	19	position: absolute;
	20	top: 400px;
	21	}
	22	</style>
b258a3da DV	23	</head>
	24	<body>
	25	<p>Hover, click and zoom to test the callbacks:</p>
d16579a0	26	<div id="div_g" style="width:600px; height:300px;"></div>
b258a3da	27
599fb4ad DV	28	<input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
599fb4ad DV	29	<input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
b258a3da DV	30	<div id="status" style="width:100%; height:200px;"></div>
	31
	32	<script type="text/javascript">
	33	s = document.getElementById("status");
3230c662 DV	34	g = null;
3230c662 DV	35	pts_info = function(e, x, pts) {
b258a3da DV	36	var str = "(" + x + ") ";
	37	for (var i = 0; i < pts.length; i++) {
	38	var p = pts[i];
	39	if (i) str += ", ";
3230c662	40	str += p.name + ": " + p.yval;
b258a3da	41	}
3230c662 DV	42
	43	var x = e.offsetX;
	44	var y = e.offsetY;
	45	var dataXY = g.toDataCoords(x, y);
	46	str += ", (" + x + ", " + y + ")";
	47	str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
	48
b258a3da DV	49	return str;
	50	};
	51
	52	g = new Dygraph(
d16579a0	53	document.getElementById("div_g"),
b258a3da DV	54	NoisyData, {
	55	rollPeriod: 7,
	56	showRoller: true,
	57	errorBars: true,
	58
	59	highlightCallback: function(e, x, pts) {
599fb4ad	60	if (document.getElementById('highlight').checked) {
3230c662	61	s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts) + "<br/>";
599fb4ad	62	}
b258a3da DV	63	},
	64
	65	clickCallback: function(e, x, pts) {
3230c662	66	s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
b258a3da DV	67	},
	68
	69	zoomCallback: function(minX, maxX) {
	70	s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + "]<br/>";
599fb4ad DV	71	},
	72
	73	drawCallback: function(g) {
	74	s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
b258a3da DV	75	}
	76	}
	77	);
	78	</script>
	79	</body>
	80	</html>