[dygraphs.git] / tests / callback.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>callbacks</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.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>
    <input type="checkbox" id="unhighlight" checked><label for="unhighlight">Show 'unhighlight' events</label>
    <input type="checkbox" id="showLabels" checked
    onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>
    <label for="showLabels"> Show Labels on highlight</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, row) {
        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] + ")";
        str += ", row #"+row;

        return str;
      };

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

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

              unhighlightCallback: function(e) {
                if (document.getElementById('unhighlight').checked) {
                  s.innerHTML += "<b>Unhighlight</b><br/>";
                }
              },

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

              pointClickCallback: function(e, p) {
                s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
              },

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

              drawCallback: function(g) {
                s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
              }
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
b258a3da DV	2	<html>
b258a3da DV	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
b258a3da DV	5	<title>callbacks</title>
b258a3da DV	6	<!--[if IE]>
a2b2c3a1	7	<script type="text/javascript" src="../excanvas.js"></script>
b258a3da	8	<![endif]-->
7e5ddc94 DV	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
b258a3da	15	<script type="text/javascript" src="data.js"></script>
3230c662 DV	16	<style type="text/css">
	17	#div_g {
	18	position: absolute;
	19	left: 200px;
	20	top: 100px;
	21	}
	22	#status {
	23	position: absolute;
	24	top: 400px;
	25	}
	26	</style>
b258a3da DV	27	</head>
	28	<body>
	29	<p>Hover, click and zoom to test the callbacks:</p>
d16579a0	30	<div id="div_g" style="width:600px; height:300px;"></div>
b258a3da	31
599fb4ad DV	32	<input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
599fb4ad DV	33	<input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
a4c6a67c	34	<input type="checkbox" id="unhighlight" checked><label for="unhighlight">Show 'unhighlight' events</label>
50360fd0 NK	35	<input type="checkbox" id="showLabels" checked
50360fd0 NK	36	onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>
8bc236f9	37	<label for="showLabels"> Show Labels on highlight</label>
b258a3da DV	38	<div id="status" style="width:100%; height:200px;"></div>
	39
	40	<script type="text/javascript">
	41	s = document.getElementById("status");
3230c662	42	g = null;
2ddb1197	43	pts_info = function(e, x, pts, row) {
b258a3da DV	44	var str = "(" + x + ") ";
	45	for (var i = 0; i < pts.length; i++) {
	46	var p = pts[i];
	47	if (i) str += ", ";
3230c662	48	str += p.name + ": " + p.yval;
b258a3da	49	}
3230c662 DV	50
	51	var x = e.offsetX;
	52	var y = e.offsetY;
	53	var dataXY = g.toDataCoords(x, y);
	54	str += ", (" + x + ", " + y + ")";
	55	str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
2ddb1197	56	str += ", row #"+row;
3230c662	57
b258a3da DV	58	return str;
	59	};
	60
	61	g = new Dygraph(
d16579a0	62	document.getElementById("div_g"),
b258a3da DV	63	NoisyData, {
	64	rollPeriod: 7,
	65	showRoller: true,
	66	errorBars: true,
	67
2ddb1197	68	highlightCallback: function(e, x, pts, row) {
599fb4ad	69	if (document.getElementById('highlight').checked) {
2ddb1197	70	s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
599fb4ad	71	}
b258a3da DV	72	},
b258a3da DV	73
a4c6a67c AV	74	unhighlightCallback: function(e) {
	75	if (document.getElementById('unhighlight').checked) {
	76	s.innerHTML += "<b>Unhighlight</b><br/>";
	77	}
	78	},
	79
b258a3da	80	clickCallback: function(e, x, pts) {
3230c662	81	s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
b258a3da DV	82	},
b258a3da DV	83
1e1bf7df DV	84	pointClickCallback: function(e, p) {
	85	s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
	86	},
	87
8d4465c4 RK	88	zoomCallback: function(minX, maxX, yRanges) {
8d4465c4 RK	89	s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
599fb4ad DV	90	},
	91
	92	drawCallback: function(g) {
	93	s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
b258a3da DV	94	}
	95	}
	96	);
	97	</script>
	98	</body>
	99	</html>