[dygraphs.git] / tests / underlay-callback.html

<html>
  <head>
    <title>Custom underlay callback</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>
    <p>Should draw a two-colored background, split horizontally at 2.25:</p>
    <div id="div_g" style="width:600px; height:300px;"></div>

    <div id="status" style="width:100%; height:200px;"></div>

    <script type="text/javascript">
      s = document.getElementById("status");

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

              underlayCallback: function(canvas, area, layout) {
                var splitHeight = area.h * (layout.yscale * (2.25 - layout.minyval));
                canvas.fillStyle = 'pink';
                canvas.fillRect(area.x, area.y + area.h, area.w, -splitHeight);
                canvas.fillStyle = 'lightblue';
                canvas.fillRect(area.x, 0, area.w, area.y + area.h - splitHeight);
              }
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
	1	<html>
	2	<head>
	3	<title>Custom underlay callback</title>
	4	<!--[if IE]>
	5	<script type="text/javascript" src="excanvas.js"></script>
	6	<![endif]-->
	7	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	8	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	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>
	12	</head>
	13	<body>
	14	<p>Should draw a two-colored background, split horizontally at 2.25:</p>
	15	<div id="div_g" style="width:600px; height:300px;"></div>
	16
	17	<div id="status" style="width:100%; height:200px;"></div>
	18
	19	<script type="text/javascript">
	20	s = document.getElementById("status");
	21
	22	g = new Dygraph(
	23	document.getElementById("div_g"),
	24	NoisyData, {
	25	rollPeriod: 7,
	26	showRoller: true,
	27	errorBars: true,
	28
	29	underlayCallback: function(canvas, area, layout) {
	30	var splitHeight = area.h * (layout.yscale * (2.25 - layout.minyval));
	31	canvas.fillStyle = 'pink';
	32	canvas.fillRect(area.x, area.y + area.h, area.w, -splitHeight);
	33	canvas.fillStyle = 'lightblue';
	34	canvas.fillRect(area.x, 0, area.w, area.y + area.h - splitHeight);
	35	}
	36	}
	37	);
	38	</script>
	39	</body>
	40	</html>