tests/underlay-callback.html

   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>