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

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <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 three-colored background, split horizontally at y:2.25, and
    again on the top at x:19Nov:</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, g) {
                // Selecting a date in the middle of the graph. 
                var splitDate = new Date("2006-11-19").getTime();
                var coords = g.toDomCoords(splitDate, 2.25);

                // splitX and splitY are the coordinates on the canvas for (2006-11-19, 2.25).
                var splitX = coords[0];
                var splitY = coords[1];

                // The drawing area doesn't start at (0, 0), it starts at (area.x, area.y).
                // That's why we subtract them from splitX and splitY. This gives us the
                // actual distance from the upper-left hand corder of the graph itself.
                var leftSideWidth = splitX - area.x;
                var rightSideWidth = area.w - leftSideWidth;
                var topHeight = splitY - area.y;
                var bottomHeight = area.h - topHeight;

                // fillRect(x, y, width, height)
                // Top section: y = (2.25, +Infinity)
                // left: (x < 2006-11-19)
                canvas.fillStyle = 'lightblue';
                canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);

                // right: (x > 2006-11-19)
                canvas.fillStyle = 'orange';
                canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
        
                // Bottom section: y = (-Infinity, 2.25)
                canvas.fillStyle = 'pink';
                canvas.fillRect(area.x, splitY, area.w, bottomHeight);
              }
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
e7746234 EC	2	<html>
e7746234 EC	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
e7746234 EC	5	<title>Custom underlay callback</title>
e7746234 EC	6	<!--[if IE]>
a2b2c3a1	7	<script type="text/javascript" src="../excanvas.js"></script>
e7746234	8	<![endif]-->
d37dca40 DV	9	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
d37dca40 DV	10	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
e7746234 EC	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	</head>
	15	<body>
c7371f01 RK	16	<p>Should draw a three-colored background, split horizontally at y:2.25, and
c7371f01 RK	17	again on the top at x:19Nov:</p>
e7746234 EC	18	<div id="div_g" style="width:600px; height:300px;"></div>
	19
	20	<div id="status" style="width:100%; height:200px;"></div>
	21
	22	<script type="text/javascript">
	23	s = document.getElementById("status");
	24
	25	g = new Dygraph(
	26	document.getElementById("div_g"),
	27	NoisyData, {
	28	rollPeriod: 7,
	29	showRoller: true,
	30	errorBars: true,
	31
04143109	32	underlayCallback: function(canvas, area, g) {
fdcf1ce4 RK	33	// Selecting a date in the middle of the graph.
fdcf1ce4 RK	34	var splitDate = new Date("2006-11-19").getTime();
5879c20d	35	var coords = g.toDomCoords(splitDate, 2.25);
04143109	36
5879c20d	37	// splitX and splitY are the coordinates on the canvas for (2006-11-19, 2.25).
fdcf1ce4 RK	38	var splitX = coords[0];
	39	var splitY = coords[1];
	40
5879c20d RK	41	// The drawing area doesn't start at (0, 0), it starts at (area.x, area.y).
	42	// That's why we subtract them from splitX and splitY. This gives us the
	43	// actual distance from the upper-left hand corder of the graph itself.
	44	var leftSideWidth = splitX - area.x;
	45	var rightSideWidth = area.w - leftSideWidth;
	46	var topHeight = splitY - area.y;
	47	var bottomHeight = area.h - topHeight;
2fc82862	48
fdcf1ce4	49	// fillRect(x, y, width, height)
2fc82862	50	// Top section: y = (2.25, +Infinity)
5879c20d	51	// left: (x < 2006-11-19)
e7746234	52	canvas.fillStyle = 'lightblue';
5879c20d	53	canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);
fdcf1ce4	54
5879c20d	55	// right: (x > 2006-11-19)
fdcf1ce4 RK	56	canvas.fillStyle = 'orange';
	57	canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
	58
	59	// Bottom section: y = (-Infinity, 2.25)
	60	canvas.fillStyle = 'pink';
	61	canvas.fillRect(area.x, splitY, area.w, bottomHeight);
e7746234 EC	62	}
	63	}
	64	);
	65	</script>
	66	</body>
	67	</html>